/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
}
/* ==========================================================
SHARE BUTTONS
========================================================== */
.sharedaddy,
.sd-sharing,
.sd-content,
.share-this,
.wp-block-jetpack-sharing-buttons{
display:none !important;
}
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}/* ==========================================================
HEREEXC — BLUE DIAMOND MOVING PARTICLE BACKGROUND
========================================================== */
#hxNetworkBackground.hx-network-background{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:-1 !important;
background:transparent !important;
}
#hxNetworkBackground .hx-network-node{
position:absolute !important;
left:var(--x) !important;
top:var(--y) !important;
width:var(--size) !important;
height:var(--size) !important;
display:block !important;
opacity:var(--opacity) !important;
border-radius:50% !important;
background:radial-gradient(circle at 35% 30%,#b9ecff 0 8%,#4cc8ff 25%,#00a8ff 58%,#006edc 100%) !important;
box-shadow:0 0 5px rgba(76,200,255,.75),0 0 14px rgba(0,168,255,.42) !important;
transform:translate3d(0,0,0) !important;
animation:hxDiamondFloat var(--duration) ease-in-out var(--delay) infinite alternate !important;
will-change:transform,opacity !important;
}
#hxNetworkBackground .hx-network-node::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:55%;
height:55%;
transform:translate(-50%,-50%) rotate(45deg);
border:1px solid rgba(185,236,255,.75);
box-shadow:0 0 5px rgba(76,200,255,.5);
}
@keyframes hxDiamondFloat{
0%{transform:translate3d(0,0,0) scale(.82);opacity:calc(var(--opacity) * .65);}
50%{opacity:var(--opacity);}
100%{transform:translate3d(var(--dx),var(--dy),0) scale(1.18);opacity:var(--opacity);}
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
}
/* ==========================================================
SHARE BUTTONS
========================================================== */
.sharedaddy,
.sd-sharing,
.sd-content,
.share-this,
.wp-block-jetpack-sharing-buttons{
display:none !important;
}
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
}
/* ==========================================================
SHARE BUTTONS
========================================================== */
.sharedaddy,
.sd-sharing,
.sd-content,
.share-this,
.wp-block-jetpack-sharing-buttons{
display:none !important;
}
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
}
/* ==========================================================
SHARE BUTTONS
========================================================== */
.sharedaddy,
.sd-sharing,
.sd-content,
.share-this,
.wp-block-jetpack-sharing-buttons{
display:none !important;
}
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN POPUP — CLOSE BUTTON FIX
========================================================== */
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
position:absolute !important;
top:14px !important;
right:14px !important;
width:42px !important;
height:36px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(73,145,205,.38) !important;
border-radius:9px !important;
background:#071A2E !important;
color:#EAF6FF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
z-index:20 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 3px 12px rgba(0,0,0,.25) !important;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease !important;
}
/* Hover */
#hxListingPopup .hx-listing-popup-close:hover,
.hx-listing-popup-close:hover {
background:#0A2B4A !important;
border-color:#39AFFF !important;
color:#6CCBFF !important;
box-shadow:
0 0 12px rgba(30,150,255,.22),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Pastikan header menjadi anchor untuk tombol close */
#hxListingPopup .hx-listing-popup-header {
position:relative !important;
min-height:48px !important;
box-sizing:border-box !important;
padding-right:65px !important;
}
/* Jangan sampai popup memotong tombol */
#hxListingPopup .hx-listing-popup-card {
position:relative !important;
overflow-x:hidden !important;
}
/* Mobile */
@media(max-width:600px){
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
top:10px !important;
right:10px !important;
width:38px !important;
height:34px !important;
font-size:20px !important;
}
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN POPUP — CLOSE BUTTON FIX
========================================================== */
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
position:absolute !important;
top:14px !important;
right:14px !important;
width:42px !important;
height:36px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(73,145,205,.38) !important;
border-radius:9px !important;
background:#071A2E !important;
color:#EAF6FF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
z-index:20 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 3px 12px rgba(0,0,0,.25) !important;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease !important;
}
/* Hover */
#hxListingPopup .hx-listing-popup-close:hover,
.hx-listing-popup-close:hover {
background:#0A2B4A !important;
border-color:#39AFFF !important;
color:#6CCBFF !important;
box-shadow:
0 0 12px rgba(30,150,255,.22),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Pastikan header menjadi anchor untuk tombol close */
#hxListingPopup .hx-listing-popup-header {
position:relative !important;
min-height:48px !important;
box-sizing:border-box !important;
padding-right:65px !important;
}
/* Jangan sampai popup memotong tombol */
#hxListingPopup .hx-listing-popup-card {
position:relative !important;
overflow-x:hidden !important;
}
/* Mobile */
@media(max-width:600px){
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
top:10px !important;
right:10px !important;
width:38px !important;
height:34px !important;
font-size:20px !important;
}
}
/* ==========================================================
HEREEXC WALLET — IMPORT ONLY / RESTORE NOTICE
========================================================== */
.hx-wallet-import-modal{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
background:rgba(0,0,0,.72) !important;
z-index:2147483000 !important;
}
.hx-wallet-import-modal.is-open{
display:flex !important;
}
.hx-wallet-import-card{
width:min(520px,100%) !important;
box-sizing:border-box !important;
padding:24px !important;
border:1px solid rgba(80,140,255,.35) !important;
border-radius:18px !important;
background:#07142f !important;
box-shadow:0 20px 70px rgba(0,0,0,.55) !important;
}
.hx-wallet-import-header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
margin-bottom:18px !important;
}
.hx-wallet-import-header h2{
margin:0 !important;
}
#hxWalletImportClose{
border:0 !important;
background:transparent !important;
font-size:28px !important;
cursor:pointer !important;
}
#hxWalletImportMnemonic,
#hxWalletImportPassword{
width:100% !important;
box-sizing:border-box !important;
margin:7px 0 15px !important;
}
#hxWalletImportSubmit{
width:100% !important;
min-height:44px !important;
cursor:pointer !important;
}
.hx-wallet-import-status{
min-height:22px !important;
margin:4px 0 12px !important;
font-size:13px !important;
}
.hx-wallet-import-note{
margin-top:14px !important;
font-size:12px !important;
opacity:.72 !important;
line-height:1.5 !important;
}
.hx-wallet-restore-notice{
position:fixed !important;
left:50% !important;
bottom:24px !important;
transform:translateX(-50%) !important;
width:min(620px,calc(100% - 32px)) !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
padding:14px 16px !important;
border:1px solid rgba(255,180,60,.4) !important;
border-radius:14px !important;
background:#07142f !important;
box-shadow:0 15px 45px rgba(0,0,0,.5) !important;
z-index:2147482999 !important;
}
.hx-wallet-restore-notice span{
flex:1 1 320px !important;
font-size:13px !important;
line-height:1.45 !important;
}
#hxWalletRestoreImport{
min-height:36px !important;
padding:8px 14px !important;
cursor:pointer !important;
}
/* ==========================================================
HEREEXC WALLET — IMPORT ONLY / RESTORE NOTICE
========================================================== */
.hx-wallet-import-modal{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
background:rgba(0,0,0,.72) !important;
z-index:2147483000 !important;
}
.hx-wallet-import-modal.is-open{
display:flex !important;
}
.hx-wallet-import-card{
width:min(520px,100%) !important;
box-sizing:border-box !important;
padding:24px !important;
border:1px solid rgba(80,140,255,.35) !important;
border-radius:18px !important;
background:#07142f !important;
box-shadow:0 20px 70px rgba(0,0,0,.55) !important;
}
.hx-wallet-import-header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
margin-bottom:18px !important;
}
.hx-wallet-import-header h2{
margin:0 !important;
}
#hxWalletImportClose{
border:0 !important;
background:transparent !important;
font-size:28px !important;
cursor:pointer !important;
}
#hxWalletImportMnemonic,
#hxWalletImportPassword{
width:100% !important;
box-sizing:border-box !important;
margin:7px 0 15px !important;
}
#hxWalletImportSubmit{
width:100% !important;
min-height:44px !important;
cursor:pointer !important;
}
.hx-wallet-import-status{
min-height:22px !important;
margin:4px 0 12px !important;
font-size:13px !important;
}
.hx-wallet-import-note{
margin-top:14px !important;
font-size:12px !important;
opacity:.72 !important;
line-height:1.5 !important;
}
.hx-wallet-restore-notice{
position:fixed !important;
left:50% !important;
bottom:24px !important;
transform:translateX(-50%) !important;
width:min(620px,calc(100% - 32px)) !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
padding:14px 16px !important;
border:1px solid rgba(255,180,60,.4) !important;
border-radius:14px !important;
background:#07142f !important;
box-shadow:0 15px 45px rgba(0,0,0,.5) !important;
z-index:2147482999 !important;
}
.hx-wallet-restore-notice span{
flex:1 1 320px !important;
font-size:13px !important;
line-height:1.45 !important;
}
#hxWalletRestoreImport{
min-height:36px !important;
padding:8px 14px !important;
cursor:pointer !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC MARKET CHART — MEXC LIVE V1.27
Chart-only CSS. Scoped to #hxTransactionPanel.
Does not touch BUY / SELL / SWAP / ORDER BAR controls.
========================================================== */
#hxTransactionPanel .hx-mexc-candle-area{
position:relative !important;
display:block !important;
width:100% !important;
min-height:420px !important;
height:420px !important;
padding:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b223a !important;
border:1px solid rgba(0,168,255,.22) !important;
border-radius:12px !important;
}
#hxTransactionPanel .hx-mexc-candle-area canvas#hxMarketChartCanvas{
display:block !important;
width:100% !important;
height:100% !important;
}
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading{
position:absolute !important;
inset:0 !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
background:rgba(5,18,32,.52) !important;
color:rgba(255,255,255,.68) !important;
font-size:12px !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:34px !important;
margin:7px 0 8px !important;
}
#hxTransactionPanel .hx-mx-price-info{
display:flex !important;
align-items:baseline !important;
gap:8px !important;
min-width:0 !important;
white-space:nowrap !important;
}
#hxTransactionPanel .hx-mx-price-info strong{
color:#f4f8ff !important;
font-size:16px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-price-info span{
font-size:11px !important;
font-weight:700 !important;
}
#hxTransactionPanel .hx-mx-price-info span.is-up{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-price-info span.is-down{color:#ff4967 !important;}
#hxTransactionPanel .hx-mx-timeframes{
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
#hxTransactionPanel .hx-mx-timeframes::-webkit-scrollbar{display:none !important;}
#hxTransactionPanel .hx-mx-timeframes button{
appearance:none !important;
border:0 !important;
background:transparent !important;
color:rgba(220,235,250,.58) !important;
border-radius:6px !important;
padding:5px 7px !important;
min-width:30px !important;
cursor:pointer !important;
font:700 10px/1 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-timeframes button:hover,
#hxTransactionPanel .hx-mx-timeframes button.is-active{
color:#fff !important;
background:rgba(76,200,255,.14) !important;
}
#hxTransactionPanel .hx-mx-live-status{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
color:#7f91a7 !important;
font:800 10px/1 Arial,sans-serif !important;
letter-spacing:.4px !important;
}
#hxTransactionPanel .hx-mx-live-status::before{
content:"" !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#7f91a7 !important;
}
#hxTransactionPanel .hx-mx-live-status.is-live{color:#25D366 !important;}
#hxTransactionPanel .hx-mx-live-status.is-live::before{
background:#25D366 !important;
box-shadow:0 0 0 0 rgba(37,211,102,.55) !important;
animation:hxMxLivePulse 1.35s infinite !important;
}
@keyframes hxMxLivePulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Pair controls intentionally sit BELOW the chart. */
#hxTransactionPanel .hx-mx-pairbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) !important;
align-items:center !important;
gap:7px !important;
margin-top:8px !important;
}
#hxTransactionPanel .hx-mx-slash{
text-align:center !important;
color:rgba(220,235,250,.55) !important;
font-size:15px !important;
font-weight:800 !important;
}
#hxTransactionPanel .hx-mx-select{
position:relative !important;
min-width:0 !important;
}
#hxTransactionPanel .hx-mx-select-button{
width:100% !important;
min-height:43px !important;
padding:0 12px !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:10px !important;
background:rgba(11,34,58,.92) !important;
color:#f3f8ff !important;
text-align:left !important;
font:800 13px/1 Arial,sans-serif !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
#hxTransactionPanel .hx-mx-select-button:hover{
border-color:rgba(76,200,255,.65) !important;
background:rgba(16,47,76,.96) !important;
}
#hxTransactionPanel .hx-mx-select-menu{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:calc(100% + 7px) !important;
z-index:999999 !important;
display:none !important;
max-height:240px !important;
overflow:auto !important;
padding:5px !important;
border:1px solid rgba(76,200,255,.35) !important;
border-radius:10px !important;
background:#0b1d31 !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
#hxTransactionPanel .hx-mx-select-menu.is-open{display:block !important;}
#hxTransactionPanel .hx-mx-select-menu button{
display:block !important;
width:100% !important;
border:0 !important;
border-radius:7px !important;
padding:9px 10px !important;
background:transparent !important;
color:#eaf3ff !important;
text-align:left !important;
cursor:pointer !important;
font:700 11px/1.2 Arial,sans-serif !important;
}
#hxTransactionPanel .hx-mx-select-menu button:hover{
background:rgba(76,200,255,.12) !important;
}
@media (max-width:600px){
#hxTransactionPanel .hx-mexc-candle-area{
height:340px !important;
min-height:340px !important;
}
#hxTransactionPanel .hx-mx-toolbar{
align-items:flex-start !important;
flex-direction:column !important;
}
#hxTransactionPanel .hx-mx-timeframes{width:100% !important;}
}
/* V1.36: definitive loading-state override */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden{
display:none !important;
}
/* V1.36 — LIVE state always wins over the loading overlay */
#hxMarketChartLoading.is-hidden,
#hxTransactionPanel #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading.is-hidden,
#hxTransactionPanel .hx-mexc-candle-area #hxMarketChartLoading[style*="display: none"]{
display:none !important;
}
/* ==========================================================
HEREEXC
FOUNDATION — HIDE RISHI / WORDPRESS DEFAULT ELEMENTS
========================================================== */
/* ==========================================================
PAGE TITLE
========================================================== */
.entry-title,
.page-title,
.wp-block-post-title{
display:none !important;
}
/* ==========================================================
BREADCRUMB
========================================================== */
.rishi-breadcrumb,
.breadcrumb,
.rank-math-breadcrumb,
.yoast-breadcrumb{
display:none !important;
}
/* ==========================================================
POST INFORMATION
========================================================== */
.entry-meta,
.post-meta,
.entry-footer,
.post-author,
.post-date{
display:none !important;
/* ==========================================================
COMMENTS
========================================================== */
.comments-area,
.comments{
display:none !important;
}
/* ==========================================================
REMOVE DEFAULT CONTENT SPACING
========================================================== */
.site-main,
.entry-content,
.page-content{
margin-top:0 !important;
padding-top:0 !important;
}
/* ==========================================================
DEFAULT THEME HEADER
========================================================== */
.site-header,
.main-header{
display:none !important;
}
/* ==========================================================
DEFAULT THEME FOOTER
========================================================== */
.site-footer,
.main-footer{
display:none !important;
}
/* ==========================================================
HEREEXC CONTENT WIDTH
========================================================== */
.entry-content{
width:100% !important;
max-width:none !important;
}/* ==========================================================
HEREEXC — REMOVE RISHI PAGE HEADER / BREADCRUMB
========================================================== */
.rishi-page-title,
.rishi-page-header,
.rishi-page-title-wrap,
.rishi-page-title-area,
.rishi-breadcrumbs,
.rishi-breadcrumb-wrapper,
.rishi-breadcrumb-wrap,
.page-header,
.entry-header{
display:none !important;
}/* ==========================================================
HEREEXC — HIDE WORDPRESS.COM GIFTING BANNER
========================================================== */
.wpcom-gifting-banner{
display:none !important;
}
/* ==========================================================
HEREEXC
PART 2 — PAGE FOUNDATION
========================================================== */
/* ==========================================================
GLOBAL RESET
========================================================== */
html,
body{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
BODY
========================================================== */
body{
overflow-x:hidden;
}
/* ==========================================================
WORDPRESS CONTENT
========================================================== */
.site-main,
.entry-content,
.page-content,
.wp-site-blocks{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:0 !important;
}
/* ==========================================================
HEREEXC APP
========================================================== */
.hx-app{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
HEREEXC BOX MODEL
========================================================== */
.hx-app,
.hx-app *,
.hx-app *::before,
.hx-app *::after{
box-sizing:border-box;
}
/* ==========================================================
HEREEXC IMAGES
========================================================== */
.hx-app img{
max-width:100%;
}
/* ==========================================================
HEREEXC BUTTONS
========================================================== */
.hx-app button{
font-family:inherit;
}
/* ==========================================================
HEREEXC INPUTS
========================================================== */
.hx-app input,
.hx-app select,
.hx-app textarea{
font-family:inherit;
box-sizing:border-box;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.hx-app{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 3 — EXCHANGE CONTAINER
========================================================== */
/* ==========================================================
MAIN EXCHANGE AREA
========================================================== */
.hx-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block;
}
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:680px;
min-width:0 !important;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
EXCHANGE PANEL CONTAINER
========================================================== */
.hx-panel-container{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
BUY / SELL / SWAP PANELS
========================================================== */
.hx-panel{
width:100%;
max-width:none;
min-width:0;
margin:0;
padding:0;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE PANEL
========================================================== */
.hx-panel.active{
width:100%;
min-width:0;
}
/* ==========================================================
PREVENT CONTENT OVERFLOW
========================================================== */
.hx-center-panel > *,
.hx-panel-container > *,
.hx-panel > *{
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* ==========================================================
DESKTOP
========================================================== */
@media(min-width:1001px){
.hx-center-panel{
width:680px;
max-width:680px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1000px){
.hx-center-panel{
width:100%;
max-width:680px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-center-panel{
width:100%;
max-width:100%;
}
}/* ==========================================================
HEREEXC
PART 4 — BUY / SELL / SWAP TABS
========================================================== */
/* ==========================================================
TAB CONTAINER
========================================================== */
.hx-tabs{
width:100%;
height:56px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:6px;
margin:0 0 14px 0;
padding:5px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:#0B1F3A;
box-sizing:border-box;
}
/* ==========================================================
TAB BUTTON
========================================================== */
.hx-tab{
width:100%;
height:44px;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 12px;
border:0;
border-radius:8px;
background:transparent;
color:#94A3B8;
font-size:13px;
font-weight:900;
line-height:1;
cursor:pointer;
box-sizing:border-box;
}
/* ==========================================================
TAB HOVER
========================================================== */
.hx-tab:hover{
color:#FFFFFF;
background:rgba(255,255,255,.05);
}
/* ==========================================================
BUY ACTIVE
========================================================== */
.hx-tab.active[data-panel="buy"]{
background:#25D366;
color:#FFFFFF;
}
/* ==========================================================
SELL ACTIVE
========================================================== */
.hx-tab.active[data-panel="sell"]{
background:#F97316;
color:#FFFFFF;
}
/* ==========================================================
SWAP ACTIVE
========================================================== */
.hx-tab.active[data-panel="swap"]{
background:
linear-gradient(
135deg,
#2563EB,
#C026D3
);
color:#FFFFFF;
}
/* ==========================================================
PANEL VISIBILITY
========================================================== */
.hx-panel{
display:none;
}
.hx-panel.active{
display:block;
width:100%;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-tabs{
height:52px;
gap:4px;
padding:4px;
}
.hx-tab{
height:42px;
padding:0 6px;
font-size:12px;
}
}/* ==========================================================
HEREEXC
PART 5 — BUY PANEL
========================================================== */
/* ==========================================================
BUY PANEL BASE
========================================================== */
#buy{
width:100%;
min-width:0;
margin:0;
padding:0;
}
/* ==========================================================
ESTIMATED RECEIVE
========================================================== */
#buy .hx-estimated-card{
width:100%;
min-width:0;
min-height:86px;
margin:0 0 10px 0;
padding:14px 16px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(37,211,102,.35);
border-radius:11px;
background:#0F1B2D;
box-sizing:border-box;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-title{
margin:0 0 5px 0;
color:#25D366;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
}
/* ==========================================================
ESTIMATED VALUE
========================================================== */
#buy .hx-estimated-card h2{
margin:0;
color:#FFFFFF;
font-size:21px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
ESTIMATED NOTE
========================================================== */
#buy .hx-estimated-card small{
display:block;
margin-top:4px;
color:#71829A;
font-size:8px;
line-height:1.2;
}
/* ==========================================================
RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:8px;
margin:0 0 10px 0;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-card{
width:100%;
min-width:0;
height:74px;
min-height:74px;
padding:8px;
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:#101C2E;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
BEST RATE
========================================================== */
#buy .hx-rate-card.active{
border-color:
rgba(37,211,102,.55);
}
/* ==========================================================
RATE BADGE
========================================================== */
#buy .hx-rate-badge{
width:max-content;
margin-bottom:4px;
padding:2px 5px;
border-radius:4px;
background:#25D366;
color:#06120A;
font-size:7px;
font-weight:900;
line-height:1.2;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-time{
color:#7F91AA;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
RATE VALUE
========================================================== */
#buy .hx-rate-card strong{
display:block;
margin-top:4px;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
RATE SMALL VALUE
========================================================== */
#buy .hx-rate-card small{
margin-top:2px;
color:#62738D;
font-size:7px;
line-height:1.2;
}
/* ==========================================================
BUY FORM CARD
========================================================== */
#buy .hx-buy-card{
width:100%;
min-width:0;
margin:0;
padding:14px;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
background:#0D192B;
box-sizing:border-box;
}
/* ==========================================================
BUY ROW
========================================================== */
#buy .hx-buy-row{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
minmax(0,1fr)
150px;
gap:10px;
align-items:end;
}
/* ==========================================================
BUY LEFT / RIGHT
========================================================== */
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100%;
min-width:0;
}
/* ==========================================================
LABEL
========================================================== */
#buy .hx-label{
display:block;
margin:0 0 5px 0;
color:#8EA0B8;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
INPUT GROUP
========================================================== */
#buy .hx-input-group{
width:100%;
min-width:0;
height:58px;
display:flex;
align-items:center;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
FIAT PREFIX
========================================================== */
#buy .hx-input-prefix{
height:100%;
min-width:96px;
flex:0 0 96px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 8px;
border:0;
border-right:1px solid #263A56;
background:#142237;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
SELECTOR LOGO
========================================================== */
#buy .hx-selector-logo{
width:21px;
height:21px;
flex:0 0 21px;
object-fit:contain;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-amount{
flex:1;
width:100%;
min-width:0;
height:100%;
padding:0 12px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
text-align:right;
font-size:18px;
font-weight:800;
}
/* ==========================================================
COIN SELECT
========================================================== */
#buy .hx-coin-select{
width:100%;
height:58px;
min-width:0;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #263A56;
border-radius:9px;
background:#101D30;
color:#FFFFFF;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy .hx-coin-select .hx-selector-logo{
width:23px;
height:23px;
flex:0 0 23px;
}
/* ==========================================================
COIN TEXT
========================================================== */
#buy #selectedCoin{
white-space:nowrap;
}
/* ==========================================================
ACTION PANEL
========================================================== */
#buy .hx-action-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
145px
minmax(0,1fr);
gap:10px;
margin-top:10px;
box-sizing:border-box;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-primary-button{
width:100%;
height:106px;
min-height:106px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#25D366;
color:#FFFFFF;
font-size:14px;
font-weight:900;
box-sizing:border-box;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-service-panel{
width:100%;
min-width:0;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-template-rows:
repeat(2,1fr);
gap:7px;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-service-card{
width:100%;
min-width:0;
height:49px;
min-height:49px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:#111E31;
color:#D8E0EA;
font-size:9px;
font-weight:800;
box-sizing:border-box;
overflow:hidden;
}
/* ==========================================================
SERVICE ICON
========================================================== */
#buy .hx-service-card img{
width:22px;
height:22px;
flex:0 0 22px;
object-fit:contain;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-service-card span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
SERVICE ACTIVE
========================================================== */
#buy .hx-service-card.active{
border-color:#25D366;
color:#25D366;
}
/* ==========================================================
BUY MOBILE
========================================================== */
@media(max-width:650px){
#buy .hx-buy-row{
grid-template-columns:1fr;
}
#buy .hx-action-panel{
grid-template-columns:1fr;
}
#buy .hx-primary-button{
height:70px;
min-height:70px;
}
}
/* ==========================================================
BUY SMALL MOBILE
========================================================== */
@media(max-width:420px){
#buy .hx-rate-options{
grid-template-columns:1fr;
}
}
/* ==========================================================
BUY FORM — STABLE CONTAINER
========================================================== */
#buy .hx-buy-card{
position:relative;
overflow:visible;
}
/* ==========================================================
BUY ROW — PREVENT OVERFLOW
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
min-width:0;
}
/* ==========================================================
INPUT GROUP — KEEP INSIDE
========================================================== */
#buy .hx-input-group{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
INPUT
========================================================== */
#buy .hx-buy-amount{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy{
position:relative;
}
/* ==========================================================
YOU PAY / FOR AREA
========================================================== */
#buy .hx-buy-row{
position:relative;
width:100%;
}
#buy > section.hx-action-panel{
padding:1px 0px !important;
}
/* ==========================================================
KEEP PAYMENT AREA BELOW DROPDOWN
========================================================== */
#buy .hx-action-area{
position:relative;
z-index:1;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — CENTER
========================================================== */
#buy .hx-estimated-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#buy .hx-estimated-card .hx-estimated-title{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-estimated-card #estimatedAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 0 6px 0 !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-estimated-card #minimumAmount{
display:block !important;
width:100% !important;
text-align:center !important;
margin:0 !important;
}/* ==========================================================
BUY — YOU PAY / FOR LABEL
========================================================== */
#buy .hx-buy-card .hx-buy-left .hx-label,
#buy .hx-buy-card .hx-buy-right .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#8FA7C7 !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
BUY — INPUT ROW
========================================================== */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:end !important;
}
/* ==========================================================
BUY — LEFT / YOU PAY
========================================================== */
#buy .hx-buy-left{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — RIGHT / FOR
========================================================== */
#buy .hx-buy-right{
min-width:0 !important;
width:100% !important;
}
/* ==========================================================
BUY — INPUT GROUP
========================================================== */
#buy .hx-buy-left .hx-input-group{
width:100% !important;
min-width:0 !important;
}
/* ==========================================================
BUY — COIN SELECTOR
========================================================== */
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
}/* ==========================================================
HEREEXC BUY
INPUT AMOUNT — CENTER VALUE ONLY
========================================================== */
/* INPUT ANGKA BUY SAJA */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:center !important;
vertical-align:middle !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* ==========================================================
INPUT ANGKA CONTAINER
========================================================== */
#buy .hx-buy-row{
align-items:center !important;
}
/* ==========================================================
JANGAN CENTER SEARCH
========================================================== */
#buy #fiatSearch,
#buy #coinSearch,
#buy input[placeholder*="Search"],
#buy input[placeholder*="search"]{
text-align:left !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* ==========================================================
DROPDOWN SEARCH
========================================================== */
#buy #fiatList input,
#buy #coinList input{
text-align:left !important;
}/* ==========================================================
HEREEXC BUY
RATE OPTIONS — FINAL COMPACT
JANGAN MENGUBAH ELEMEN ETH
========================================================== */
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
font-size:inherit !important;
}
/* ==========================================================
RATE LABEL
Best rate / Fast / Decentralized
========================================================== */
#buy .hx-rate-options .hx-rate-label{
font-size:10px !important;
line-height:1.2 !important;
padding:3px 7px !important;
}
/* ==========================================================
TIME
◷ 15–40 min
========================================================== */
#buy .hx-rate-options .hx-rate-time{
font-size:11px !important;
line-height:1.3 !important;
}
/* ==========================================================
ETH VALUE
0.000000000 ETH
WAJIB TETAP TERLIHAT
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:13px !important;
line-height:1.3 !important;
color:#FFFFFF !important;
}
/* ==========================================================
USD PRICE
≈ $6163.75
========================================================== */
#buy .hx-rate-options .hx-rate-price{
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
BEST RATE CARD
BORDER ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
BEST RATE LABEL
HIJAU + PUTIH
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child
.hx-rate-label{
background:#25D366 !important;
color:#FFFFFF !important;
}
/* ==========================================================
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — MORE HORIZONTAL SPACE
========================================================== */
#buy .hx-rate-options{
width:100% !important;
grid-template-columns:
repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
}
/* ==========================================================
HEREEXC BUY
RATE OPTIONS — REFINED HEIGHT
========================================================== */
#buy .hx-rate-options .hx-rate-card{
min-height:90px !important;
height:90px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
BEST RATE BADGE — FINAL
========================================================== */
#buy > div > div.hx-rate-card.active > span.hx-rate-badge{
background:#25D366 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
padding:4px 8px !important;
border-radius:5px !important;
display:inline-block !important;
}/* ==========================================================
RATE BADGE — WHITE FONT ONLY
========================================================== */
#buy .hx-rate-options .hx-rate-card .hx-rate-badge{
color:#FFFFFF !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM BUY UI — FINAL DESIGN
NO ANIMATION
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — BUY PANEL FOUNDATION
========================================================== */
#buy{
width:100% !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — SERVICE TABS
BUY / SELL / SWAP
========================================================== */
#buy .hx-tabs,
#buy .hx-service-tabs{
background:#0B1F3A !important;
border:1px solid #233552 !important;
border-radius:16px !important;
padding:4px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BUY ACTIVE
========================================================== */
#buy .hx-tabs button.active,
#buy .hx-service-tabs button.active,
#buy .hx-tab.active{
background:#25D366 !important;
color:#FFFFFF !important;
border-radius:12px !important;
font-weight:800 !important;
}
/* ==========================================================
03 — ESTIMATED RECEIVE
========================================================== */
#buy .hx-buy-card{
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(37,211,102,.55) !important;
border-radius:16px !important;
padding:26px 22px !important;
box-sizing:border-box !important;
text-align:center !important;
box-shadow:
0 8px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
ESTIMATED LABEL
========================================================== */
#buy .hx-buy-card .hx-label,
#buy .hx-buy-card .hx-buy-label,
#buy .hx-buy-card .hx-estimated-label{
color:#25D366 !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
ESTIMATED AMOUNT
========================================================== */
#buy .hx-buy-card .hx-buy-amount{
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
margin-top:10px !important;
}
/* ==========================================================
MINIMUM PURCHASE
========================================================== */
#buy .hx-buy-card small,
#buy .hx-buy-card .hx-minimum{
color:#7185A3 !important;
font-size:10px !important;
margin-top:6px !important;
}
/* ==========================================================
04 — RATE OPTIONS
========================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ==========================================================
RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card{
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
min-height:90px !important;
height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
BEST RATE CARD
========================================================== */
#buy .hx-rate-options .hx-rate-card:first-child{
border-color:#25D366 !important;
}
/* ==========================================================
ALL RATE BADGES
========================================================== */
#buy .hx-rate-options .hx-rate-label,
#buy .hx-rate-options .hx-rate-badge{
background:#25D366 !important;
color:#06110A !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
padding:4px 7px !important;
border-radius:5px !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#buy .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
}
/* ==========================================================
ETH VALUE
========================================================== */
#buy .hx-rate-options .hx-rate-value{
display:block !important;
visibility:visible !important;
opacity:1 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
}
/* ==========================================================
USD PRICE
========================================================== */
#buy .hx-rate-options .hx-rate-price{
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — YOU PAY / FOR CONTAINER
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(37,211,102,.45) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABELS
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-input-label,
#buy .hx-buy-label{
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
}
/* ==========================================================
06 — INPUT BOX
========================================================== */
#buy .hx-input-prefix,
#buy .hx-input-suffix,
#buy .hx-buy-input,
#buy .hx-input{
background:#101D31 !important;
border-color:#293D59 !important;
color:#FFFFFF !important;
}
/* ==========================================================
INPUT NUMBER
CENTER
========================================================== */
#buy input{
color:#FFFFFF !important;
}
/* angka YOU PAY */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
}
/* ==========================================================
07 — CURRENCY SELECTOR
========================================================== */
#buy .hx-input-prefix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
08 — COIN SELECTOR
========================================================== */
#buy .hx-input-suffix{
color:#FFFFFF !important;
font-weight:800 !important;
}
/* ==========================================================
09 — PAYMENT AREA
========================================================== */
#buy .hx-action-area{
margin-top:10px !important;
}
/* ==========================================================
BUY NOW BUTTON
========================================================== */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
background:#25D366 !important;
color:#FFFFFF !important;
border:1px solid #25D366 !important;
border-radius:14px !important;
min-height:126px !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.2px !important;
box-shadow:
0 8px 20px rgba(37,211,102,.14) !important;
}
/* ==========================================================
10 — PAYMENT OPTIONS
========================================================== */
#buy .hx-payment-grid{
gap:8px !important;
}
/* ==========================================================
PAYMENT BUTTON
========================================================== */
#buy .hx-payment-button,
#buy .hx-payment-option{
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:12px !important;
color:#FFFFFF !important;
min-height:58px !important;
box-sizing:border-box !important;
}
/* ==========================================================
PAYMENT TEXT
========================================================== */
#buy .hx-payment-button span,
#buy .hx-payment-option span{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
11 — DROPDOWN SAFETY
JANGAN MENGUBAH LAYOUT BUY
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
#buy #coinList,
#buy #fiatList{
position:absolute !important;
z-index:9999 !important;
}
/* ==========================================================
12 — MOBILE
========================================================== */
@media (max-width:650px){
#buy .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
min-height:88px !important;
height:88px !important;
padding:9px !important;
}
#buy .hx-rate-options .hx-rate-value{
font-size:12px !important;
}
#buy .hx-buy-card .hx-buy-amount{
font-size:23px !important;
}
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — MINIMUM PURCHASE
========================================================== */
#buy > section.hx-estimated-card small,
#buy > section.hx-estimated-card .hx-minimum{
font-size:13px !important;
line-height:1.4 !important;
color:#7890B0 !important;
text-align:center !important;
display:block !important;
width:100% !important;
margin-top:8px !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED CARD — TALLER
========================================================== */
#buy > section.hx-estimated-card{
width:100% !important;
min-height:125px !important;
height:125px !important;
padding-top:22px !important;
padding-bottom:22px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS DIAGONAL
JARAK LEBIH AMAN DARI ANGKA
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — PREMIUM DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================================
DIAGONAL GLASS
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:-5% !important;
width:32% !important;
background:
linear-gradient(
135deg,
rgba(120,165,205,.16) 0%,
rgba(92,145,190,.11) 38%,
rgba(65,120,170,.06) 68%,
rgba(255,255,255,0) 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
opacity:.95 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:30% !important;
width:1px !important;
background:
linear-gradient(
180deg,
rgba(140,205,235,.02),
rgba(100,190,220,.20),
rgba(255,255,255,.03)
) !important;
transform:skewX(-24deg) !important;
transform-origin:center !important;
opacity:.65 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
KEEP CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:2 !important;
}/* ==========================================================
HEREEXC BUY
DIAGONAL GLASS — THICK GLASS DEPTH
========================================================== */
/* ==========================================================
GLASS DEPTH LAYER
========================================================== */
#buy > section.hx-estimated-card{
background:
linear-gradient(
145deg,
rgba(20,38,58,.98),
rgba(10,23,40,.98)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
THICK GLASS DIAGONAL
========================================================== */
#buy > section.hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(160,205,235,.20) 0%,
rgba(116,170,210,.15) 28%,
rgba(76,135,180,.10) 55%,
rgba(40,90,130,.04) 78%,
transparent 100%
) !important;
clip-path:polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:1px solid rgba(180,225,245,.16) !important;
box-shadow:
8px 0 18px rgba(70,150,200,.06),
inset -3px 0 8px rgba(255,255,255,.035) !important;
opacity:1 !important;
pointer-events:none !important;
z-index:1 !important;
}
/* ==========================================================
GLASS REFLECTION EDGE
========================================================== */
#buy > section.hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,240,255,.08) 18%,
rgba(170,225,245,.24) 50%,
rgba(210,240,255,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.15px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
/* ==========================================================
CONTENT ABOVE GLASS
========================================================== */
#buy > section.hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}/* ==========================================================
HEREEXC BUY
ESTIMATED RECEIVE — GLASS SHINE
========================================================== */
#buy > section.hx-estimated-card::before{
/* tetap mempertahankan diagonal */
background:
linear-gradient(
135deg,
rgba(185,225,245,.24) 0%,
rgba(145,200,230,.17) 22%,
rgba(100,165,205,.10) 45%,
rgba(255,255,255,.035) 68%,
transparent 100%
) !important;
box-shadow:
inset -2px 0 6px rgba(255,255,255,.08),
8px 0 22px rgba(80,170,215,.08) !important;
}
/* ==========================================================
GLASS HIGHLIGHT — DIAGONAL REFLECTION
========================================================== */
#buy > section.hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,255,255,.10) 18%,
rgba(220,245,255,.28) 48%,
rgba(255,255,255,.08) 68%,
transparent 100%
) !important;
width:2px !important;
opacity:.9 !important;
filter:
blur(.2px)
drop-shadow(0 0 5px rgba(180,230,255,.12)) !important;
}
/* ==========================================================
HEREEXC BUY
IDR / BTC ICON — PREMIUM ROUND
========================================================== */
/* ==========================================================
ICON CONTAINER
========================================================== */
#buy .hx-input-prefix img,
#buy .hx-input-suffix img,
#buy .hx-coin-icon,
#buy .hx-currency-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
min-height:30px !important;
max-height:30px !important;
border-radius:50% !important;
object-fit:cover !important;
display:block !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
IDR — PREMIUM GREEN ACCENT
========================================================== */
#buy .hx-input-prefix img{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(37,211,102,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}
/* ==========================================================
BTC — PREMIUM ORANGE ACCENT
========================================================== */
#buy .hx-input-suffix img{
border-color:rgba(247,147,26,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(247,147,26,.08),
inset 0 1px 1px rgba(255,255,255,.10) !important;
}/* ==========================================================
HEREEXC BUY
BTC LOGO — PREMIUM ROUND
POSITION LOCK
========================================================== */
#buyCoinButton{
position:relative !important;
}
/* ==========================================================
BTC LOGO
========================================================== */
#buyCoinButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(247,147,26,.55) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 9px rgba(247,147,26,.12),
inset 0 1px 2px rgba(255,255,255,.12) !important;
/* KUNCI POSISI */
margin:0 !important;
vertical-align:middle !important;
transform:none !important;
}/* ==========================================================
HEREEXC BUY
YOU PAY / FOR — PREMIUM UI
BORDER COLOR LOCKED
========================================================== */
/* ==========================================================
MAIN BUY ROW
========================================================== */
#buy .hx-buy-row{
background:
linear-gradient(
145deg,
rgba(18,32,52,.96),
rgba(10,22,38,.96)
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(37,211,102,.32) !important;
border-radius:16px !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* ==========================================================
LABEL
YOU PAY / FOR
========================================================== */
#buy .hx-buy-row .hx-label,
#buy .hx-buy-row label{
color:#8FA9C8 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#buy .hx-buy-row input{
background:#101E31 !important;
color:#FFFFFF !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.38) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.025),
0 2px 8px rgba(0,0,0,.16) !important;
}
/* ==========================================================
AMOUNT
========================================================== */
#buy .hx-buy-row input[type="number"],
#buy .hx-buy-row input[type="text"]{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
}
/* ==========================================================
CURRENCY BUTTONS
========================================================== */
#buy #buyFiatButton,
#buy #buyCoinButton{
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
/* BORDER ASLI — JANGAN DIUBAH */
border:1px solid rgba(77,112,150,.42) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-weight:700 !important;
}#buy #buyCoinButton{
border-color:rgba(37,211,102,.28) !important;
}
/* ==========================================================
IDR BUTTON — BORDER LOCKED
========================================================== */
#buy #buyFiatButton{
border-color:rgba(37,211,102,.20) !important;
}
/* ==========================================================
INPUT FOCUS
TIDAK MENGUBAH WARNA BORDER PERMANEN
========================================================== */
#buy .hx-buy-row input:focus{
outline:none !important;
border-color:rgba(37,211,102,.55) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.07),
inset 0 1px 2px rgba(255,255,255,.025) !important;
}
/* ==========================================================
HEREEXC
TAB — INACTIVE STATE CLEAN
========================================================== */
.hx-tabs .hx-tab:not(.active){
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
}
/* ==========================================================
BUY INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SELL INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active){
color:#8FA9C8 !important;
}
/* ==========================================================
SWAP INACTIVE
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active){
color:#8FA9C8 !important;
}/* ==========================================================
HEREEXC
TAB HOVER — PREMIUM
========================================================== */
/* ==========================================================
GENERAL HOVER
========================================================== */
.hx-tabs .hx-tab:not(.active):hover{
color:#FFFFFF !important;
transform:translateY(-1px) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 4px 12px rgba(0,0,0,.16) !important;
}
/* ==========================================================
BUY HOVER
GREEN
========================================================== */
.hx-tabs .hx-tab[data-panel="buy"]:not(.active):hover{
background:rgba(37,211,102,.10) !important;
border-color:rgba(37,211,102,.35) !important;
color:#25D366 !important;
}
/* ==========================================================
SELL HOVER
ORANGE
========================================================== */
.hx-tabs .hx-tab[data-panel="sell"]:not(.active):hover{
background:rgba(249,115,22,.10) !important;
border-color:rgba(249,115,22,.35) !important;
color:#F97316 !important;
}
/* ==========================================================
SWAP HOVER
BLUE / MAGENTA
========================================================== */
.hx-tabs .hx-tab[data-panel="swap"]:not(.active):hover{
background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
) !important;
border-color:rgba(99,102,241,.40) !important;
color:#A78BFA !important;
}/* ==========================================================
HEREEXC BUY
ACTION ROW — PREMIUM SOFT GREEN FRAME
BUY NOW + ALL SERVICES
========================================================== */
/* ==========================================================
OUTER ROW
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) !important;
gap:12px !important;
padding:12px !important;
box-sizing:border-box !important;
align-items:stretch !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(18,32,52,.98),
rgba(8,20,34,.98)
) !important;
/* SOFT GREEN BORDER */
border:1px solid rgba(37,211,102,.38) !important;
border-radius:17px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.035),
0 8px 22px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ==========================================================
SUBTLE INNER GREEN FRAME
========================================================== */
#buy .hx-action-panel::before{
content:"" !important;
position:absolute !important;
inset:4px !important;
border:1px solid rgba(37,211,102,.06) !important;
border-radius:13px !important;
pointer-events:none !important;
z-index:0 !important;
}
/* ==========================================================
BUY NOW
========================================================== */
#buy .hx-action-panel .hx-primary-button{
position:relative !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
min-height:140px !important;
margin:0 !important;
border-radius:12px !important;
box-sizing:border-box !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
width:100% !important;
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
min-width:0 !important;
margin:0 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE CARDS
========================================================== */
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
box-sizing:border-box !important;
border-radius:11px !important;
}
/* ==========================================================
DROPDOWN — ABOVE EVERYTHING
========================================================== */
#buy .hx-action-panel{
z-index:20 !important;
}
#buy #coinList{
position:absolute !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
PREMIUM ACTION ROW — FINISHING
========================================================== */
/* ==========================================================
ACTION ROW — SOFT GLASS
========================================================== */
#buy .hx-action-panel{
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border-color:
rgba(37,211,102,.25) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
SERVICE PANEL
========================================================== */
#buy .hx-action-panel .hx-service-panel{
gap:10px !important;
}
/* ==========================================================
SERVICE CARDS — PREMIUM GLASS
========================================================== */
#buy .hx-action-panel .hx-service-card{
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
border-radius:11px !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#buy .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(21,40,63,.98),
rgba(13,28,46,.98)
) !important;
border-color:
rgba(37,211,102,.28) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 5px 14px rgba(0,0,0,.16) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#buy .hx-action-panel .hx-service-card span{
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.25px !important;
}
/* ==========================================================
BUY NOW — PREMIUM DEPTH
========================================================== */
#buy .hx-action-panel .hx-primary-button{
background:
linear-gradient(
145deg,
#25D366,
#20C75D
) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(37,211,102,.14) !important;
}
/* ==========================================================
BUY NOW TEXT
========================================================== */
#buy .hx-action-panel .hx-primary-button{
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
}/* ==========================================================
HEREEXC BUY
DROPDOWN LAYER FIX
JANGAN MENUTUPI COIN LIST
========================================================== */
/* ==========================================================
BUY INPUT ROW — ABOVE ACTION ROW
========================================================== */
#buy .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
COIN DROPDOWN — VERY HIGH
========================================================== */
#buy #coinList{
position:absolute !important;
z-index:999999 !important;
}
/* ==========================================================
ACTION ROW — BELOW DROPDOWN
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SERVICE PANEL
DO NOT CREATE HIGH STACKING LAYER
========================================================== */
#buy .hx-action-panel .hx-service-panel{
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
SERVICE CARD
========================================================== */
#buy .hx-action-panel .hx-service-card{
position:relative !important;
z-index:1 !important;
}/* ==========================================================
HEREEXC BUY
FIAT BUTTON — PREMIUM IDR
========================================================== */
#buy #buyFiatButton{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
width:100% !important;
min-height:46px !important;
padding:7px 12px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
border:1px solid rgba(37,211,102,.20) !important;
border-radius:10px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 3px 9px rgba(0,0,0,.14) !important;
}
/* ==========================================================
IDR LOGO
========================================================== */
#buy #buyFiatButton img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
display:block !important;
}
/* ==========================================================
IDR TEXT
========================================================== */
#buy #buyFiatButton #selectedFiat{
color:#FFFFFF !important;
font-weight:800 !important;
letter-spacing:.3px !important;
}
/* ==========================================================
ARROW
========================================================== */
#buy #buyFiatButton .hx-arrow{
margin-left:auto !important;
color:#8FA9C8 !important;
font-size:10px !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PRECISION PREMIUM
========================================================== */
/* ==========================================================
INPUT GROUP — DROPDOWN ANCHOR
========================================================== */
#buy .hx-buy-left .hx-input-group{
position:relative !important;
overflow:visible !important;
z-index:9999 !important;
}
/* ==========================================================
FIAT DROPDOWN
========================================================== */
#buy #fiatList{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:absolute !important;
top:calc(100% + 7px) !important;
left:0 !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
padding:7px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(37,211,102,.28) !important;
border-radius:12px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH AREA
========================================================== */
#buy #fiatList .hx-search-box{
width:100% !important;
margin:0 0 6px 0 !important;
padding:0 !important;
}
/* ==========================================================
SEARCH INPUT
========================================================== */
#buy #fiatList #fiatSearch{
display:block !important;
width:100% !important;
height:36px !important;
margin:0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:#0D1B2E !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.32) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #fiatList #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
background:transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
/* ==========================================================
FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
/* ==========================================================
FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
display:block !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:rgba(37,211,102,.08) !important;
}
/* ==========================================================
DROPDOWN ABOVE ACTION ROW
========================================================== */
#buy .hx-action-panel{
position:relative !important;
z-index:20 !important;
}
#buy .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC
DROPDOWN — RAISE TO ROW FOOT
FIAT + COIN
========================================================== */
#buy #fiatList,
#buy #coinList{
top:auto !important;
bottom:0 !important;
}
/* ==========================================================
FIAT
TEPAT DI BAWAH / MENYENTUH KAKI ROW
========================================================== */
#buy #fiatList{
left:0 !important;
right:auto !important;
transform:
translateY(100%) !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN
FINAL ANCHOR — BTC ROW
========================================================== */
/* ==========================================================
01 — BTC AREA
COIN LIST WAJIB MENGIKUTI AREA INI
========================================================== */
#buy .hx-buy-right{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
02 — COIN LIST
TEPAT DI KAKI ROW BTC
========================================================== */
#buy #coinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
margin:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
padding:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#101B2D !important;
border:1px solid #263B59 !important;
border-radius:8px !important;
box-shadow:
0 10px 25px
rgba(0,0,0,.45) !important;
z-index:99999 !important;
}/* ==========================================================
HEREEXC BUY
COIN DROPDOWN — PREMIUM DESIGN
POSITION TETAP
========================================================== */
/* ==========================================================
COIN LIST — GLASS PANEL
========================================================== */
#buy #coinList{
/* POSITION — JANGAN DIUBAH */
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
/* SIZE */
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
/* SPACING */
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
/* PREMIUM GLASS */
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
/* BORDER */
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
/* DEPTH */
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH BOX
========================================================== */
#buy #coinSearch{
width:100% !important;
height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
SEARCH FOCUS
========================================================== */
#buy #coinSearch:focus{
border-color:rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px rgba(37,211,102,.06) !important;
}
/* ==========================================================
SEARCH PLACEHOLDER
========================================================== */
#buy #coinSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#buy #coinList .hx-coin-item{
display:flex !important;
align-items:center !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
HOVER
========================================================== */
#buy #coinList .hx-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#buy #coinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#buy #coinList .hx-coin-item span{
flex:1 !important;
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#buy #coinList::-webkit-scrollbar{
width:4px !important;
}
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #coinList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}/* ==========================================================
HEREEXC BUY
FIAT DROPDOWN — PREMIUM DESIGN
========================================================== */
/* ==========================================================
01 — FIAT LIST
POSISI TETAP — TEPAT DI BAWAH TOMBOL IDR
========================================================== */
#buy #fiatList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(20,35,55,.98),
rgba(9,20,35,.98)
) !important;
border:1px solid rgba(70,100,135,.55) !important;
border-radius:12px !important;
box-shadow:
0 18px 40px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.035) !important;
z-index:99999 !important;
}
/* ==========================================================
02 — SEARCH FIAT
========================================================== */
#buy #fiatSearch{
width:100% !important;
height:34px !important;
min-height:34px !important;
margin:0 0 5px 0 !important;
padding:0 10px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0F1D30
) !important;
color:#FFFFFF !important;
border:1px solid rgba(77,112,150,.35) !important;
border-radius:8px !important;
outline:none !important;
font-size:12px !important;
font-weight:600 !important;
}
/* ==========================================================
03 — SEARCH FIAT FOCUS
========================================================== */
#buy #fiatSearch:focus{
border-color:
rgba(37,211,102,.45) !important;
box-shadow:
0 0 0 2px
rgba(37,211,102,.06) !important;
}
/* ==========================================================
04 — SEARCH PLACEHOLDER
========================================================== */
#buy #fiatSearch::placeholder{
color:#7188A5 !important;
opacity:1 !important;
}
/* ==========================================================
05 — FIAT ITEM
========================================================== */
#buy #fiatList .hx-fiat-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
06 — FIAT HOVER
========================================================== */
#buy #fiatList .hx-fiat-item:hover{
background:
linear-gradient(
90deg,
rgba(37,211,102,.10),
rgba(37,211,102,.035)
) !important;
border-color:
rgba(37,211,102,.18) !important;
}
/* ==========================================================
07 — FIAT LOGO
========================================================== */
#buy #fiatList .hx-fiat-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
display:block !important;
flex:0 0 28px !important;
object-fit:contain !important;
object-position:center !important;
border-radius:50% !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
08 — FIAT TEXT
========================================================== */
#buy #fiatList .hx-fiat-item span{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
09 — FIAT SCROLLBAR
========================================================== */
#buy #fiatList::-webkit-scrollbar{
width:4px !important;
}
#buy #fiatList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb{
background:#263B59 !important;
border-radius:10px !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover{
background:#355171 !important;
}
/* ==========================================================
10 — FIAT LAYER
========================================================== */
#buy #fiatList{
z-index:99999 !important;
}
/* ==========================================================
HEREEXC SELL
FINAL SELL PANEL
MIRROR SIZE OF BUY
NO HTML / JS CHANGE
========================================================== */
/* ==========================================================
01 — SELL PANEL FOUNDATION
========================================================== */
#sell{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
color:#FFFFFF;
}
/* ==========================================================
02 — ESTIMATED PAYMENT
SAMA TINGGI DENGAN BUY ESTIMATED CARD
========================================================== */
#sell > .hx-estimated-card{
width:100% !important;
min-width:0 !important;
height:125px !important;
min-height:125px !important;
margin:0 0 10px 0 !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
background:
linear-gradient(
145deg,
rgba(42,29,18,.98),
rgba(15,24,37,.98)
) !important;
border:1px solid rgba(249,115,22,.60) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.28),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
ESTIMATED TITLE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:center !important;
}
/* ==========================================================
ESTIMATED PAYMENT VALUE
========================================================== */
#sell #estimatedFiat{
display:block !important;
width:100% !important;
margin:0 0 6px 0 !important;
color:#FFFFFF !important;
font-size:27px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.4px !important;
text-align:center !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
display:block !important;
width:100% !important;
margin:0 !important;
color:#7890B0 !important;
font-size:13px !important;
font-weight:500 !important;
line-height:1.4 !important;
text-align:center !important;
}
/* ==========================================================
03 — ESTIMATED PAYMENT GLASS
MIRROR BUY DIAGONAL
========================================================== */
#sell > .hx-estimated-card::before{
content:"" !important;
position:absolute !important;
top:-8% !important;
bottom:-8% !important;
left:-6% !important;
width:34% !important;
background:
linear-gradient(
135deg,
rgba(255,177,105,.18) 0%,
rgba(249,115,22,.12) 35%,
rgba(180,90,25,.06) 65%,
transparent 100%
) !important;
clip-path:
polygon(
0 0,
100% 0,
72% 100%,
0 100%
) !important;
border-right:
1px solid rgba(255,190,130,.14) !important;
box-shadow:
8px 0 18px rgba(249,115,22,.05) !important;
pointer-events:none !important;
z-index:1 !important;
}
#sell > .hx-estimated-card::after{
content:"" !important;
position:absolute !important;
top:-5% !important;
bottom:-5% !important;
left:31% !important;
width:2px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255,225,205,.08) 18%,
rgba(255,190,150,.24) 50%,
rgba(255,225,205,.06) 82%,
transparent 100%
) !important;
transform:skewX(-24deg) !important;
filter:blur(.2px) !important;
opacity:.8 !important;
pointer-events:none !important;
z-index:2 !important;
}
#sell > .hx-estimated-card > *{
position:relative !important;
z-index:3 !important;
}
/* ==========================================================
04 — SELL RATE OPTIONS
SAMA DENGAN BUY
========================================================== */
#sell .hx-rate-options{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin:0 0 10px 0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
SELL RATE CARD
EXACT BUY HEIGHT
========================================================== */
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:#101D31 !important;
border:1px solid #263954 !important;
border-radius:14px !important;
}
/* ==========================================================
BEST SELL RATE
========================================================== */
#sell .hx-rate-options
.hx-rate-card:first-child{
border-color:#F97316 !important;
}
/* ==========================================================
RATE TOP
========================================================== */
#sell .hx-rate-top{
display:flex !important;
align-items:center !important;
gap:6px !important;
min-width:0 !important;
}
/* ==========================================================
RATE BADGE
========================================================== */
#sell .hx-rate-options .hx-rate-badge{
display:inline-block !important;
width:max-content !important;
max-width:100% !important;
padding:4px 7px !important;
border-radius:5px !important;
background:#F97316 !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE TIME
========================================================== */
#sell .hx-rate-options .hx-rate-time{
color:#7890B0 !important;
font-size:11px !important;
line-height:1.3 !important;
margin-top:5px !important;
white-space:nowrap !important;
}
/* ==========================================================
RATE VALUE
========================================================== */
#sell .hx-rate-options
.hx-rate-card strong{
display:block !important;
margin-top:5px !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
RATE PRICE
========================================================== */
#sell .hx-rate-options
.hx-rate-card small{
display:block !important;
margin-top:2px !important;
color:#637997 !important;
font-size:10px !important;
line-height:1.2 !important;
}
/* ==========================================================
05 — SELL FORM
SAMA UKURAN DENGAN BUY FORM
========================================================== */
#sell .hx-sell-card{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:100 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#0E1B2E,
#0C1728
) !important;
border:1px solid rgba(249,115,22,.45) !important;
border-radius:16px !important;
}
/* ==========================================================
06 — SELL ROW
EXACT BUY GRID
========================================================== */
#sell .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT / RIGHT
========================================================== */
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ==========================================================
07 — SELL LABELS
========================================================== */
#sell .hx-label{
display:block !important;
width:100% !important;
margin:0 0 10px 0 !important;
padding:0 !important;
color:#7890B0 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.7px !important;
text-transform:uppercase !important;
text-align:left !important;
}
/* ==========================================================
08 — SELL INPUT GROUP
========================================================== */
#sell .hx-input-group{
width:100% !important;
min-width:0 !important;
height:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
position:relative !important;
overflow:visible !important;
background:#101D31 !important;
border:1px solid #293D59 !important;
border-radius:9px !important;
}
/* ==========================================================
SELL COIN SELECTOR
========================================================== */
#sell #sellCoinButton{
height:100% !important;
min-width:96px !important;
flex:0 0 96px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 9px !important;
box-sizing:border-box !important;
border:0 !important;
border-right:1px solid #293D59 !important;
border-radius:9px 0 0 9px !important;
background:
linear-gradient(
145deg,
#14243A,
#101D30
) !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
cursor:pointer !important;
}
/* ==========================================================
SELL COIN LOGO
========================================================== */
#sell #sellCoinButton img,
#sell #selectedSellCoinLogo{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
border-radius:50% !important;
padding:3px !important;
box-sizing:border-box !important;
background:#111E31 !important;
border:1px solid rgba(249,115,22,.45) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.35),
0 0 8px rgba(249,115,22,.08) !important;
}
/* ==========================================================
SELL COIN TEXT
========================================================== */
#sell #selectedSellCoin{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
/* ==========================================================
SELL ARROW
========================================================== */
#sell #sellCoinButton .hx-arrow{
color:#8FA9C8 !important;
font-size:10px !important;
}
/* ==========================================================
SELL AMOUNT
========================================================== */
#sell #sellAmount{
flex:1 !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 12px !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:right !important;
font-size:18px !important;
font-weight:800 !important;
box-sizing:border-box !important;
}
/* ==========================================================
10 — SELL ACTION PANEL
EXACT BUY WIDTH
========================================================== */
#sell .hx-action-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
gap:10px !important;
margin-top:10px !important;
padding:16px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:20 !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
rgba(13,27,45,.98),
rgba(8,19,33,.98)
) !important;
border:1px solid rgba(249,115,22,.30) !important;
border-radius:16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
inset 0 -1px 0 rgba(0,0,0,.20),
0 10px 26px rgba(0,0,0,.20) !important;
}
/* ==========================================================
11 — SELL NOW
SAMA TINGGI DENGAN BUY NOW
========================================================== */
#sell #sellNowButton{
width:100% !important;
height:126px !important;
min-height:126px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
#F97316,
#EA580C
) !important;
color:#FFFFFF !important;
font-size:16px !important;
font-weight:800 !important;
letter-spacing:.4px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.10),
0 7px 18px rgba(249,115,22,.14) !important;
}
/* ==========================================================
SELL NOW HOVER
========================================================== */
#sell #sellNowButton:hover{
background:
linear-gradient(
145deg,
#FB923C,
#F97316
) !important;
}
/* ==========================================================
12 — SELL SERVICE PANEL
========================================================== */
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
/* ==========================================================
13 — SELL SERVICE CARD
========================================================== */
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:58px !important;
padding:0 9px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
rgba(18,34,55,.96),
rgba(12,25,42,.96)
) !important;
border:1px solid rgba(76,112,150,.28) !important;
border-radius:11px !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:700 !important;
overflow:hidden !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.18),
0 3px 10px rgba(0,0,0,.12) !important;
}
/* ==========================================================
SERVICE CARD HOVER
========================================================== */
#sell .hx-action-panel .hx-service-card:hover{
background:
linear-gradient(
145deg,
rgba(35,42,54,.98),
rgba(18,30,45,.98)
) !important;
border-color:
rgba(249,115,22,.35) !important;
}
/* ==========================================================
SERVICE TEXT
========================================================== */
#sell .hx-action-panel .hx-service-card{
color:#FFFFFF !important;
}
#sell .hx-action-panel .hx-service-card span{
min-width:0 !important;
color:#FFFFFF !important;
font-weight:700 !important;
letter-spacing:.2px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
14 — SELL DROPDOWN LAYER
========================================================== */
#sell .hx-buy-row{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
#sell .hx-action-panel{
position:relative !important;
z-index:20 !important;
overflow:visible !important;
}
/* ==========================================================
SELL LEFT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-left{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
SELL RIGHT DROPDOWN ANCHOR
========================================================== */
#sell .hx-buy-right{
position:relative !important;
z-index:9999 !important;
overflow:visible !important;
}
/* ==========================================================
15 — FUTURE SELL COIN DROPDOWN
CSS READY
========================================================== */
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
rgba(17,32,51,.99),
rgba(8,20,34,.99)
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.045) !important;
z-index:999999 !important;
}
/* ==========================================================
FUTURE SELL COIN ITEM
========================================================== */
#sell #sellCoinList .hx-coin-item{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:9px !important;
width:100% !important;
height:40px !important;
min-height:40px !important;
margin:2px 0 !important;
padding:5px 9px !important;
box-sizing:border-box !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
}
#sell #sellCoinList .hx-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
}
#sell #sellCoinList .hx-coin-item img{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
object-fit:contain !important;
border-radius:50% !important;
}
#sell #sellCoinList .hx-coin-item span{
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ==========================================================
16 — SELL MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-rate-options{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options
.hx-rate-card{
height:88px !important;
min-height:88px !important;
padding:9px !important;
}
#sell .hx-rate-options
.hx-rate-card strong{
font-size:12px !important;
}
#sell .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
#sell .hx-action-panel{
grid-template-columns:1fr !important;
}
#sell #sellNowButton{
height:70px !important;
min-height:70px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:none !important;
}
}
/* ==========================================================
17 — SMALL MOBILE
========================================================== */
@media(max-width:420px){
#sell .hx-rate-options{
grid-template-columns:1fr !important;
}
#sell > .hx-estimated-card{
height:125px !important;
min-height:125px !important;
}
#sell .hx-action-panel
.hx-service-panel{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* ==========================================================
END — HEREEXC SELL FINAL
========================================================== *//* ==========================================================
HEREEXC SELL
INNER ROW — YOU SELL / SELLING FOR
========================================================== */
#sell .hx-sell-card{
width:100% !important;
padding:14px !important;
box-sizing:border-box !important;
}
/* ==========================================================
INNER SELL ROW
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:14px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
160px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31 0%,
#0D192B 100%
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}
/* ==========================================================
YOU SELL
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-left{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
SELLING FOR
========================================================== */
#sell .hx-sell-card > .hx-buy-row
> .hx-buy-right{
width:100% !important;
min-width:0 !important;
position:relative !important;
}
/* ==========================================================
LABELS
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-label{
margin:0 0 8px 0 !important;
color:#8FA7C7 !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.6px !important;
}
/* ==========================================================
INPUT AREA
========================================================== */
#sell .hx-sell-card > .hx-buy-row
.hx-input-group{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
SELLING FOR BUTTON
========================================================== */
#sell .hx-sell-card > .hx-buy-row
#sellingForButton{
height:58px !important;
min-height:58px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:650px){
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:1fr !important;
gap:12px !important;
padding:12px !important;
}
}/* ==========================================================
SELL — INNER ROW LEBIH LEBAR
========================================================== */
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
170px !important;
gap:14px !important;
align-items:end !important;
position:relative !important;
overflow:visible !important;
background:
linear-gradient(
145deg,
#101D31,
#0D192B
) !important;
border:1px solid rgba(249,115,22,.32) !important;
border-radius:12px !important;
}/* ==========================================================
HEREEXC SELL
ESTIMATED PAYMENT — PREMIUM NAVY GLASS
ORANGE ACCENT ONLY
========================================================== */
#sell > .hx-estimated-card{
background:
linear-gradient(
145deg,
#182A40 0%,
#122238 48%,
#0D1B2E 100%
) !important;
border:1px solid rgba(249,115,22,.48) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
inset 0 -1px 0 rgba(0,0,0,.22),
0 8px 24px rgba(0,0,0,.18) !important;
}
/* ==========================================================
DIAGONAL GLASS
LEBIH NETRAL — BUKAN ORANGE
========================================================== */
#sell > .hx-estimated-card::before{
background:
linear-gradient(
135deg,
rgba(104,137,171,.20) 0%,
rgba(66,101,137,.12) 38%,
rgba(30,55,80,.05) 68%,
transparent 100%
) !important;
border-right:
1px solid rgba(143,169,200,.10) !important;
box-shadow:
8px 0 18px rgba(40,80,115,.06) !important;
}
/* ==========================================================
DIAGONAL LIGHT
PUTIH / BIRU MUDA
========================================================== */
#sell > .hx-estimated-card::after{
background:
linear-gradient(
180deg,
transparent 0%,
rgba(210,230,250,.05) 18%,
rgba(210,230,250,.16) 50%,
rgba(210,230,250,.04) 82%,
transparent 100%
) !important;
opacity:.75 !important;
}
/* ==========================================================
TITLE TETAP ORANGE
========================================================== */
#sell > .hx-estimated-card
.hx-estimated-title{
color:#F97316 !important;
}
/* ==========================================================
NILAI IDR
========================================================== */
#sell #estimatedFiat{
color:#FFFFFF !important;
}
/* ==========================================================
MINIMUM SELL
========================================================== */
#sell #minimumSell{
color:#7890B0 !important;
}/* ==========================================================
HEREEXC SELL
SELLING FOR / FUND DROPDOWN
FINAL
========================================================== */
/* ==========================================================
SELLING WRAPPER
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
FUND BUTTON
========================================================== */
#sell #sellingForButton{
position:relative !important;
width:100% !important;
height:58px !important;
min-height:58px !important;
margin:0 !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
color:#FFFFFF !important;
outline:none !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035) !important;
}
/* ==========================================================
FUND TEXT
========================================================== */
#sell #selectedSellingFor{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
/* ==========================================================
ARROW
========================================================== */
#sell #sellingForButton .hx-arrow{
margin-left:auto !important;
color:#8FA7C7 !important;
font-size:11px !important;
}
/* ==========================================================
BUTTON HOVER
========================================================== */
#sell #sellingForButton:hover{
background:
linear-gradient(
145deg,
#182A40,
#0F2034
) !important;
border-color:
rgba(255,122,0,.65) !important;
}
/* ==========================================================
FUND DROPDOWN
========================================================== */
#sell #sellingForList{
position:absolute !important;
top:calc(100% + 4px) !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:1px solid rgba(255,122,0,.45) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50),
inset 0 1px 0
rgba(255,255,255,.035) !important;
display:none !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
}
/* ==========================================================
OPEN STATE
JS MENGGUNAKAN .active
========================================================== */
#sell #sellingForList.active{
display:block !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
min-height:40px !important;
margin:2px 0 !important;
padding:6px 9px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:8px !important;
color:#FFFFFF !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease !important;
}
/* ==========================================================
FUND ITEM ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
font-size:18px !important;
}
/* ==========================================================
FUND ITEM TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
FUND ITEM HOVER
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.22) !important;
transform:translateX(2px) !important;
}
/* ==========================================================
SELL DROPDOWN SCROLLBAR
========================================================== */
#sell #sellingForList::-webkit-scrollbar{
width:4px !important;
}
#sell #sellingForList::-webkit-scrollbar-track{
background:transparent !important;
}
#sell #sellingForList::-webkit-scrollbar-thumb{
background:#465A72 !important;
border-radius:10px !important;
}
/* ==========================================================
SELL CARD MUST NOT CUT DROPDOWN
========================================================== */
#sell .hx-sell-card{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
#sell .hx-buy-row{
position:relative !important;
z-index:100 !important;
overflow:visible !important;
}
/* ==========================================================
SELL — FUND DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-selling-wrapper{
position:relative !important;
width:100% !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellingForList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
max-height:200px !important;
margin:0 !important;
padding:6px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(255,122,0,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
FUND ITEMS
========================================================== */
#sell #sellingForList .hx-selling-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
color:#FFFFFF !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellingForList .hx-selling-icon{
width:27px !important;
min-width:27px !important;
text-align:center !important;
font-size:17px !important;
}
/* ==========================================================
TEXT
========================================================== */
#sell #sellingForList .hx-selling-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ==========================================================
HOVER — VISUAL ONLY
========================================================== */
#sell #sellingForList .hx-selling-item:hover{
background:
rgba(255,122,0,.10) !important;
border-color:
rgba(255,122,0,.18) !important;
}
/* ==========================================================
SELL — COIN DROPDOWN
MANUAL DESIGN MODE
========================================================== */
#sell .hx-buy-left{
position:relative !important;
overflow:visible !important;
z-index:99999 !important;
}
#sell #sellCoinList{
position:absolute !important;
top:100% !important;
left:0 !important;
right:auto !important;
bottom:auto !important;
width:185px !important;
min-width:185px !important;
max-width:185px !important;
height:auto !important;
max-height:210px !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#14243A,
#0D1B2E
) !important;
border:
1px solid rgba(249,115,22,.40) !important;
border-radius:10px !important;
box-shadow:
0 14px 30px rgba(0,0,0,.50) !important;
z-index:999999 !important;
}
/* ==========================================================
SEARCH PREVIEW
========================================================== */
#sell .hx-sell-search-preview{
width:100% !important;
height:36px !important;
display:flex !important;
align-items:center !important;
padding:0 9px !important;
margin-bottom:5px !important;
box-sizing:border-box !important;
background:#0B1728 !important;
border:
1px solid #263B59 !important;
border-radius:7px !important;
color:#7188A5 !important;
font-size:11px !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#sell #sellCoinList .hx-sell-coin-item{
width:100% !important;
height:40px !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:5px 9px !important;
margin:2px 0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:1px solid transparent !important;
border-radius:7px !important;
color:#FFFFFF !important;
}
/* ==========================================================
ICON
========================================================== */
#sell #sellCoinList .hx-sell-coin-icon{
width:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#FFFFFF !important;
font-size:18px !important;
}
/* ==========================================================
COIN NAME
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item strong{
color:#FFFFFF !important;
font-size:12px !important;
font-weight:800 !important;
}
/* ==========================================================
HOVER
========================================================== */
#sell #sellCoinList
.hx-sell-coin-item:hover{
background:
rgba(249,115,22,.10) !important;
border-color:
rgba(249,115,22,.18) !important;
}/* ==========================================================
HEREEXC SELL
COIN LIST — PREMIUM SCROLLBAR
========================================================== */
/* ==========================================================
COIN LIST SCROLL
========================================================== */
#sell #sellCoinList{
scrollbar-width:thin !important;
scrollbar-color:
rgba(249,115,22,.65)
#0B1728 !important;
}
/* ==========================================================
CHROME / EDGE / SAFARI
========================================================== */
#sell #sellCoinList::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
/* ==========================================================
SCROLLBAR TRACK
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-track{
background:
#0B1728 !important;
border-radius:10px !important;
margin:5px 2px !important;
}
/* ==========================================================
SCROLLBAR THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#F97316,
#D95F02
) !important;
border-radius:10px !important;
border:
1px solid rgba(255,255,255,.08) !important;
}
/* ==========================================================
HOVER THUMB
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#FF8A3D,
#F97316
) !important;
}
/* ==========================================================
SCROLLBAR CORNER
========================================================== */
#sell #sellCoinList::-webkit-scrollbar-corner{
background:#0B1728 !important;
}
/* ==========================================================
CONFIRM
GREEN — HEREEXC BUY STYLE
========================================================== */
.hx-confirm-action{
width:100%;
height:45px;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
border:
1px solid
rgba(37,211,102,.60);
border-radius:9px;
color:#FFFFFF;
font-size:11px;
font-weight:900;
cursor:pointer;
box-shadow:
0 7px 20px
rgba(37,211,102,.20);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.hx-confirm-action:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
);
transform:translateY(-1px);
box-shadow:
0 10px 25px
rgba(37,211,102,.30);
}
/* ==========================================================
HEREEXC
FINAL DROPDOWN VISIBILITY CONTROL
LETAKKAN PALING BAWAH CSS
========================================================== */
/* ==========================================================
BUY — COIN
========================================================== */
#buy #coinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY COIN */
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}/* ==========================================================
BUY — FIAT
========================================================== */
#buy #fiatList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN BUY FIAT */
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — COIN / BTC
========================================================== */
#sell #sellCoinList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL COIN */
#sell #sellCoinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SELL — FUND
========================================================== */
#sell #sellingForList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SELL FUND */
#sell #sellingForList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — FROM
========================================================== */
#swap #swapFromList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP FROM */
#swap #swapFromList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
SWAP — TO
========================================================== */
#swap #swapToList{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
/* OPEN SWAP TO */
#swap #swapToList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
HEREEXC — SWAP ORDER RESULT
COMPACT PREMIUM CARD
========================================================== */
/* ==========================================================
MAIN ORDER RESULT
========================================================== */
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
width:100%;
max-width:100%;
box-sizing:border-box;
margin:12px 0 0;
padding:14px 16px;
background:
linear-gradient(
145deg,
#0E1B2D,
#101F34
);
border:
1px solid
rgba(0,168,255,.28);
border-radius:12px;
box-shadow:
0 8px 24px
rgba(0,0,0,.20),
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
ORDER TITLE
========================================================== */
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
margin:0 0 12px;
padding-bottom:9px;
border-bottom:
1px solid
rgba(99,102,241,.18);
color:#FFFFFF;
font-size:15px;
line-height:1.2;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
ORDER ID
========================================================== */
.hx-swap-order-result .order-id,
.hx-swap-order .order-id,
.hx-order-result .order-id{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:11px;
color:#8FA5BE;
}
.hx-swap-order-result .order-id strong,
.hx-swap-order .order-id strong,
.hx-order-result .order-id strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
COPY ID
========================================================== */
.hx-swap-order-result button,
.hx-swap-order button,
.hx-order-result button{
min-width:70px;
height:30px;
padding:0 12px;
border:0;
border-radius:7px;
background:
linear-gradient(
135deg,
#1677E8,
#2563EB
);
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
box-shadow:
0 4px 12px
rgba(37,99,235,.20);
}
/* ==========================================================
ORDER INFORMATION
========================================================== */
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
margin:5px 0;
color:#9DB1C8;
font-size:11px;
line-height:1.35;
}
.hx-swap-order-result p strong,
.hx-swap-order p strong,
.hx-order-result p strong{
color:#FFFFFF;
font-weight:800;
}
/* ==========================================================
STATUS
========================================================== */
.hx-swap-order-result .status,
.hx-swap-order .status,
.hx-order-result .status{
color:#25D366;
font-weight:900;
}
/* ==========================================================
STATUS STEPS
========================================================== */
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:8px;
margin-top:11px;
padding-top:10px;
border-top:
1px solid
rgba(99,102,241,.15);
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
color:#7F94AB;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.hx-swap-order-result .steps span:first-child,
.hx-swap-order .steps span:first-child,
.hx-order-result .steps span:first-child{
color:#25D366;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-order-result,
.hx-swap-order,
.hx-order-result{
padding:12px;
margin-top:10px;
border-radius:10px;
}
.hx-swap-order-result h2,
.hx-swap-order h2,
.hx-order-result h2{
font-size:14px;
margin-bottom:10px;
}
.hx-swap-order-result p,
.hx-swap-order p,
.hx-order-result p{
font-size:10px;
}
.hx-swap-order-result .steps,
.hx-swap-order .steps,
.hx-order-result .steps{
gap:4px;
}
.hx-swap-order-result .steps span,
.hx-swap-order .steps span,
.hx-order-result .steps span{
font-size:8px;
}
}/* ==========================================================
HEREEXC SWAP
PREMIUM SPACE EDITION
COMPLETE SWAP PANEL
========================================================== */
/* ==========================================================
01. SWAP MAIN CONTAINER
========================================================== */
.hx-swap-layout{
width:100%;
max-width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
color:#FFFFFF;
}
/* ==========================================================
GLOBAL BOX SIZING
========================================================== */
.hx-swap-layout *,
.hx-swap-layout *::before,
.hx-swap-layout *::after{
box-sizing:border-box;
}
/* ==========================================================
02. TOP LAYOUT
LEFT = CONVERTER
RIGHT = ORDER
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
03. LEFT CONVERTER COLUMN
========================================================== */
.hx-swap-converter-column{
min-width:0;
display:flex;
flex-direction:column;
}
/* ==========================================================
04. SEND / RECEIVE CARD
========================================================== */
.hx-swap-field-card{
position:relative;
width:100%;
min-width:0;
padding:14px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
PREMIUM TOP LINE
========================================================== */
.hx-swap-field-card::before{
content:"";
position:absolute;
top:0;
left:12%;
width:76%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.55),
rgba(168,85,247,.55),
transparent
);
}
/* ==========================================================
05. LABEL
========================================================== */
.hx-swap-field-card .hx-label{
display:block;
margin:0 0 8px;
color:#80BDF5;
font-size:9px;
font-weight:900;
line-height:1.2;
letter-spacing:.8px;
}
/* ==========================================================
06. INPUT ROW
========================================================== */
.hx-swap-field-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
07. INPUT GROUP
========================================================== */
.hx-swap-field-card .hx-input-group{
position:relative;
width:100%;
min-width:0;
min-height:58px;
display:flex;
align-items:center;
overflow:visible;
background:
linear-gradient(
135deg,
#091A2D,
#071421
);
border:
1px solid
rgba(0,168,255,.30);
border-radius:10px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
08. COIN SELECTOR
========================================================== */
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto;
width:auto;
min-width:88px;
height:56px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:0 12px;
margin:0;
background:transparent;
border:0;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:900;
}
/* ==========================================================
SELECTOR HOVER
========================================================== */
.hx-swap-field-card .hx-input-prefix:hover{
background:
rgba(0,168,255,.07);
}
/* ==========================================================
COIN LOGO
========================================================== */
.hx-swap-field-card .hx-selector-logo{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:block;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
COIN TICKER
========================================================== */
.hx-swap-field-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
}
/* ==========================================================
AMOUNT INPUT
========================================================== */
.hx-swap-field-card .hx-buy-amount{
flex:1;
min-width:0;
width:100%;
height:56px;
margin:0;
padding:
0 14px 0 8px;
background:transparent;
border:0;
outline:0;
color:#FFFFFF;
font-size:19px;
font-weight:800;
text-align:right;
}
/* ==========================================================
INPUT PLACEHOLDER
========================================================== */
.hx-swap-field-card .hx-buy-amount::placeholder{
color:#50657D;
opacity:1;
}
/* ==========================================================
REMOVE NUMBER ARROWS
========================================================== */
.hx-swap-field-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-field-card .hx-buy-amount::-webkit-outer-spin-button{
margin:0;
-webkit-appearance:none;
}
.hx-swap-field-card .hx-buy-amount{
-moz-appearance:textfield;
}
/* ==========================================================
09. DROPDOWN
========================================================== */
.hx-swap-field-card .hx-swap-coin-list{
position:absolute;
top:calc(100% + 7px);
left:0;
width:220px;
max-width:100%;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:6px;
background:
linear-gradient(
145deg,
#132944,
#0B192B
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:10px;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 25px
rgba(0,168,255,.10);
z-index:10000;
}
/* ==========================================================
DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-track{
background:#081322;
}
.hx-swap-field-card .hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
10. COIN ITEM
========================================================== */
.hx-swap-field-card .hx-swap-coin-item{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border-radius:7px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-field-card .hx-swap-coin-item:hover{
background:
rgba(0,168,255,.10);
transform:translateX(2px);
}
/* ==========================================================
ITEM LOGO
========================================================== */
.hx-swap-field-card .hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
11. SWAP DIRECTION AREA
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:5;
}
/* ==========================================================
DIRECTION BUTTON
========================================================== */
.hx-swap-direction{
width:34px;
height:34px;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#132B49,
#182343
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:50%;
cursor:pointer;
box-shadow:
0 5px 15px
rgba(0,0,0,.30),
0 0 15px
rgba(0,168,255,.12);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
border-color:
rgba(217,70,239,.60);
box-shadow:
0 7px 20px
rgba(0,0,0,.35),
0 0 18px
rgba(217,70,239,.20);
}
/* ==========================================================
DIRECTION IMAGE
========================================================== */
.hx-swap-direction img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
/* ==========================================================
12. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
min-width:0;
display:flex;
align-items:stretch;
}
/* ==========================================================
13. ORDER CARD
========================================================== */
.hx-swap-order-card{
position:relative;
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
padding:15px;
background:
linear-gradient(
145deg,
#142944 0%,
#102239 55%,
#0D1B2D 100%
);
border:
1px solid
rgba(168,85,247,.32);
border-radius:13px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 8px 22px
rgba(0,0,0,.18);
}
/* ==========================================================
ORDER TOP LIGHT
========================================================== */
.hx-swap-order-card::before{
content:"";
position:absolute;
top:0;
left:10%;
width:80%;
height:2px;
background:
linear-gradient(
90deg,
transparent,
#00A8FF,
#8B5CF6,
#D946EF,
transparent
);
border-radius:20px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
margin:0 0 12px;
padding:
4px 0 10px;
border-bottom:
1px solid
rgba(255,255,255,.07);
color:#FFFFFF;
font-size:14px;
font-weight:900;
line-height:1.2;
letter-spacing:.3px;
}
/* ==========================================================
15. ORDER ROW
========================================================== */
.hx-order-row{
width:100%;
min-height:31px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr)
auto;
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
/* ==========================================================
ORDER LABEL
========================================================== */
.hx-order-row > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
}
/* ==========================================================
ORDER VALUE
========================================================== */
.hx-order-row > strong{
min-width:0;
color:#FFFFFF;
font-size:10px;
font-weight:800;
line-height:1.25;
word-break:break-word;
}
/* ==========================================================
16. COPY ORDER
========================================================== */
.hx-copy-order{
height:25px;
min-width:56px;
padding:0 7px;
border:
1px solid
rgba(37,99,235,.50);
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
.hx-copy-order:hover{
filter:brightness(1.12);
box-shadow:
0 4px 12px
rgba(37,99,235,.25);
}
/* ==========================================================
17. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:34px;
display:grid;
grid-template-columns:
72px
minmax(0,1fr);
gap:8px;
align-items:center;
border-bottom:
1px solid
rgba(255,255,255,.045);
}
.hx-order-status > span{
color:#7189A5;
font-size:8px;
font-weight:900;
letter-spacing:.5px;
}
.hx-order-status > strong{
color:#25D366;
font-size:10px;
font-weight:900;
}
/* ==========================================================
18. ORDER PROGRESS
========================================================== */
.hx-order-progress{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr 1fr;
gap:5px;
margin-top:auto;
padding-top:12px;
}
/* ==========================================================
STEP
========================================================== */
.hx-step{
min-width:0;
min-height:39px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:5px 3px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.06);
border-radius:7px;
color:#627991;
font-size:7px;
font-weight:800;
text-align:center;
}
/* ==========================================================
STEP NUMBER
========================================================== */
.hx-step span{
width:17px;
height:17px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#26364A;
color:#8FA5BE;
font-size:8px;
font-weight:900;
}
/* ==========================================================
ACTIVE STEP
========================================================== */
.hx-step.active{
color:#25D366;
border-color:
rgba(37,211,102,.24);
background:
rgba(37,211,102,.045);
}
.hx-step.active span{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
);
color:#FFFFFF;
box-shadow:
0 0 10px
rgba(37,211,102,.25);
}
/* ==========================================================
19. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:13px 15px;
background:
linear-gradient(
145deg,
#142944,
#0D1B2D
);
border:
1px solid
rgba(0,168,255,.27);
border-radius:12px;
}
/* ==========================================================
RECEIVING LABEL
========================================================== */
.hx-swap-receiving-section label{
display:block;
margin-bottom:7px;
color:#80BDF5;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
RECEIVING INPUT
========================================================== */
.hx-swap-receiving-section #receiverAddress{
width:100%;
height:43px;
margin:0;
padding:0 12px;
background:#071421;
border:
1px solid
rgba(0,168,255,.27);
border-radius:8px;
outline:none;
color:#FFFFFF;
font-size:11px;
font-weight:600;
}
.hx-swap-receiving-section #receiverAddress::placeholder{
color:#536A82;
}
.hx-swap-receiving-section #receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 15px
rgba(0,168,255,.08);
}
/* ==========================================================
20. AGREEMENTS
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:12px 14px;
background:
rgba(8,20,34,.65);
border:
1px solid
rgba(255,255,255,.06);
border-radius:10px;
}
/* ==========================================================
AGREEMENT ROW
========================================================== */
.hx-swap-agreement-section > label{
width:100%;
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:5px 0;
color:#7F94AB;
font-size:9px;
font-weight:500;
line-height:1.45;
cursor:pointer;
}
/* ==========================================================
CHECKBOX
========================================================== */
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:14px;
height:14px;
margin:1px 0 0;
accent-color:#25D366;
cursor:pointer;
}
/* ==========================================================
AGREEMENT LINKS
========================================================== */
.hx-swap-agreement-section a{
color:#58B7FF;
text-decoration:none;
font-weight:700;
}
.hx-swap-agreement-section a:hover{
color:#9BD7FF;
text-decoration:underline;
}
/* ==========================================================
21. ACTION AREA
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
/* ==========================================================
CONTINUE BUTTON
========================================================== */
.hx-swap-button{
width:100%;
height:48px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5,
#7C3AED
);
border:
1px solid
rgba(129,140,248,.65);
border-radius:10px;
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.7px;
cursor:pointer;
box-shadow:
0 8px 22px
rgba(79,70,229,.22),
inset 0 1px 0
rgba(255,255,255,.16);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 11px 28px
rgba(79,70,229,.34),
0 0 18px
rgba(99,102,241,.14);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
22. DROPDOWN DEFAULT CLOSED
========================================================== */
#swapFromList,
#swapToList{
display:none;
}
/* ==========================================================
JS OPENS SWAP DROPDOWN
========================================================== */
#swapFromList[style*="display: block"],
#swapToList[style*="display: block"]{
display:block;
}
/* ==========================================================
23. RESPONSIVE — TABLET
========================================================== */
@media(max-width:850px){
.hx-swap-top-layout{
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:9px;
}
.hx-swap-field-card,
.hx-swap-order-card{
padding:12px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:78px;
padding:0 9px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:17px;
}
.hx-order-row{
grid-template-columns:
62px
minmax(0,1fr)
auto;
}
.hx-order-status{
grid-template-columns:
62px
minmax(0,1fr);
}
}
/* ==========================================================
24. RESPONSIVE — MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
gap:10px;
}
.hx-swap-order-column{
width:100%;
}
.hx-swap-order-card{
min-height:auto;
}
.hx-swap-field-card{
padding:13px;
}
.hx-swap-switch{
height:36px;
}
.hx-swap-direction{
width:32px;
height:32px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:82px;
}
.hx-swap-field-card .hx-buy-amount{
font-size:18px;
}
.hx-order-progress{
margin-top:12px;
}
}
/* ==========================================================
25. RESPONSIVE — SMALL MOBILE
========================================================== */
@media(max-width:450px){
.hx-swap-field-card,
.hx-swap-order-card{
padding:11px;
border-radius:10px;
}
.hx-swap-field-card .hx-input-group{
min-height:53px;
}
.hx-swap-field-card .hx-input-prefix{
min-width:76px;
height:51px;
padding:0 8px;
gap:6px;
}
.hx-swap-field-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
.hx-swap-field-card .hx-input-prefix span{
font-size:11px;
}
.hx-swap-field-card .hx-buy-amount{
height:51px;
padding-right:10px;
font-size:16px;
}
.hx-order-header{
font-size:13px;
}
.hx-order-row{
grid-template-columns:
60px
minmax(0,1fr)
auto;
min-height:29px;
}
.hx-order-row > span,
.hx-order-status > span{
font-size:7px;
}
.hx-order-row > strong,
.hx-order-status > strong{
font-size:9px;
}
.hx-copy-order{
min-width:50px;
height:23px;
font-size:6px;
}
.hx-step{
font-size:6px;
}
.hx-swap-receiving-section{
padding:11px;
}
.hx-swap-agreement-section{
padding:10px;
}
.hx-swap-agreement-section > label{
font-size:8px;
}
.hx-swap-button{
height:45px;
min-height:45px;
font-size:11px;
}
}/* ==========================================================
HEREEXC SWAP — PRECISION LAYOUT FIX
========================================================== */
/* ==========================================================
01. TOP SWAP AREA
========================================================== */
.hx-swap-top-layout{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:12px;
align-items:stretch;
}
/* ==========================================================
02. LEFT CONVERTER
KETINGGIAN HARUS SAMA DENGAN ORDER
========================================================== */
.hx-swap-converter-column{
width:100%;
min-width:0;
display:grid;
grid-template-rows:
minmax(0,1fr)
38px
minmax(0,1fr);
gap:0;
align-items:stretch;
}
/* ==========================================================
03. SEND CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card{
width:100%;
height:100%;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:13px;
}
/* ==========================================================
04. RECEIVE CARD
========================================================== */
.hx-swap-converter-column
.hx-swap-field-card:last-child{
height:100%;
min-height:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-converter-column
.hx-input-group{
width:100%;
height:58px;
min-height:58px;
}
/* ==========================================================
06. SWAP ARROW
TETAP DI TENGAH
========================================================== */
.hx-swap-switch{
width:100%;
height:38px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}
/* ==========================================================
07. ARROW
========================================================== */
.hx-swap-direction{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
padding:5px;
}
/* ==========================================================
08. ORDER COLUMN
========================================================== */
.hx-swap-order-column{
width:100%;
min-width:0;
height:100%;
display:flex;
align-items:stretch;
}
/* ==========================================================
09. ORDER CARD
========================================================== */
.hx-swap-order-card{
width:100%;
height:100%;
min-height:100%;
display:flex;
flex-direction:column;
}
/* ==========================================================
10. ORDER PROGRESS
DORONG KE KAKI CARD
========================================================== */
.hx-order-progress{
width:100%;
margin-top:auto;
}
/* ==========================================================
11. RECEIVING ADDRESS
JANGAN MEMBUAT JARAK BESAR
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
}
/* ==========================================================
12. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:9px;
}
/* ==========================================================
13. CONTINUE
========================================================== */
.hx-swap-action{
width:100%;
margin-top:10px;
}
.hx-swap-button{
width:100%;
height:46px;
min-height:46px;
}
/* ==========================================================
14. ORDER HEADER
========================================================== */
.hx-order-header{
flex:0 0 auto;
}
/* ==========================================================
15. ORDER ROW COMPRESSION
========================================================== */
.hx-order-row{
min-height:30px;
}
/* ==========================================================
16. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:32px;
}
/* ==========================================================
17. ORDER PROGRESS
========================================================== */
.hx-order-progress{
margin-top:auto;
padding-top:10px;
}
/* ==========================================================
18. MOBILE
========================================================== */
@media(max-width:700px){
.hx-swap-top-layout{
grid-template-columns:1fr;
}
.hx-swap-converter-column{
display:grid;
grid-template-rows:
auto
38px
auto;
}
.hx-swap-converter-column
.hx-swap-field-card{
height:auto;
}
.hx-swap-order-card{
height:auto;
min-height:0;
}
}/* ==========================================================
HEREEXC SWAP — PREMIUM EDITION
VISUAL ONLY
Tidak mengubah ID / JS / converter
========================================================== */
/* ==========================================================
01. SWAP AREA
========================================================== */
.hx-swap-card,
.hx-swap-switch,
.hx-swap-action,
.hx-swap-receiving-section,
.hx-swap-agreement-section,
.hx-order-card,
.hx-order-header,
.hx-order-row,
.hx-order-status,
.hx-order-progress{
box-sizing:border-box;
}
/* ==========================================================
02. SWAP INPUT CARD
========================================================== */
.hx-swap-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A 0%,
#0D1D31 55%,
#0A1729 100%
);
border:
1px solid
rgba(37,99,235,.55);
border-radius:14px;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 10px 28px rgba(0,0,0,.18);
position:relative;
overflow:visible;
}
/* ==========================================================
03. LABEL
========================================================== */
.hx-swap-card .hx-label{
display:block;
margin:0 0 8px 1px;
color:#72B7FF;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
/* ==========================================================
04. INPUT ROW
========================================================== */
.hx-swap-card .hx-buy-row{
width:100%;
margin:0;
padding:0;
}
/* ==========================================================
05. INPUT GROUP
========================================================== */
.hx-swap-card .hx-input-group{
width:100%;
min-height:50px;
display:flex;
align-items:center;
position:relative;
background:
linear-gradient(
135deg,
#07182B,
#091B2F
);
border:
1px solid
rgba(0,168,255,.42);
border-radius:10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 4px 12px rgba(0,0,0,.15);
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.hx-swap-card .hx-input-group:focus-within{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08),
0 0 18px rgba(0,168,255,.12);
}
/* ==========================================================
06. COIN SELECTOR
========================================================== */
.hx-swap-card .hx-input-prefix{
flex:0 0 auto;
height:48px;
min-width:105px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:12px;
font-weight:900;
cursor:pointer;
position:relative;
z-index:5;
}
/* ==========================================================
07. COIN LOGO
========================================================== */
.hx-swap-card .hx-selector-logo{
width:24px;
height:24px;
min-width:24px;
object-fit:contain;
border-radius:50%;
display:block;
}
/* ==========================================================
08. COIN TICKER
========================================================== */
.hx-swap-card .hx-input-prefix span{
color:#FFFFFF;
font-size:12px;
font-weight:900;
line-height:1;
}
/* ==========================================================
09. DROPDOWN ARROW
========================================================== */
.hx-swap-card .hx-input-prefix::after{
content:"▼";
display:block;
margin-left:1px;
color:#8DA9C4;
font-size:8px;
line-height:1;
transition:
color .2s ease,
transform .2s ease;
}
.hx-swap-card .hx-input-prefix:hover::after{
color:#FFFFFF;
}
/* ==========================================================
10. AMOUNT INPUT
========================================================== */
.hx-swap-card .hx-buy-amount{
flex:1 1 auto;
width:100%;
min-width:0;
height:48px;
padding:
0 12px
0 4px;
margin:0;
border:0;
outline:none;
background:transparent;
color:#FFFFFF;
font-size:15px;
font-weight:900;
text-align:right;
box-shadow:none;
appearance:textfield;
}
.hx-swap-card .hx-buy-amount::placeholder{
color:#58708A;
opacity:1;
}
.hx-swap-card .hx-buy-amount:focus{
color:#FFFFFF;
}
/* remove number arrows */
.hx-swap-card .hx-buy-amount::-webkit-inner-spin-button,
.hx-swap-card .hx-buy-amount::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ==========================================================
11. SWAP DROPDOWN
========================================================== */
.hx-swap-coin-list{
position:absolute;
top:
calc(100% + 7px);
left:0;
width:230px;
max-height:260px;
overflow-y:auto;
padding:6px;
background:
linear-gradient(
145deg,
#10253D,
#0A172A
);
border:
1px solid
rgba(0,168,255,.55);
border-radius:11px;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 25px rgba(0,168,255,.08);
z-index:999999;
display:none;
}
/* JS can use display block */
.hx-swap-coin-list.active,
.hx-swap-coin-list.show{
display:block;
}
/* ==========================================================
12. DROPDOWN ITEM
========================================================== */
.hx-swap-coin-item{
min-height:40px;
display:flex;
align-items:center;
gap:9px;
padding:7px 9px;
border-radius:8px;
color:#FFFFFF;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-swap-coin-item:hover{
background:
linear-gradient(
90deg,
rgba(0,168,255,.14),
rgba(109,93,246,.12)
);
transform:translateX(2px);
}
.hx-swap-coin-item img{
width:24px;
height:24px;
object-fit:contain;
border-radius:50%;
}
/* ==========================================================
13. DROPDOWN SCROLLBAR
========================================================== */
.hx-swap-coin-list::-webkit-scrollbar{
width:5px;
}
.hx-swap-coin-list::-webkit-scrollbar-track{
background:#081629;
border-radius:10px;
}
.hx-swap-coin-list::-webkit-scrollbar-thumb{
background:
linear-gradient(
#2563EB,
#A855F7
);
border-radius:10px;
}
/* ==========================================================
14. SWAP DIRECTION
========================================================== */
.hx-swap-switch{
width:100%;
height:34px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}
.hx-swap-direction{
width:32px;
height:32px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:
1px solid
rgba(168,85,247,.85);
background:
linear-gradient(
135deg,
#0B2138,
#101A36
);
box-shadow:
0 0 0 3px rgba(37,99,235,.06),
0 0 16px rgba(168,85,247,.18);
cursor:pointer;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-swap-direction:hover{
transform:rotate(180deg);
box-shadow:
0 0 0 3px rgba(37,99,235,.10),
0 0 24px rgba(168,85,247,.35);
}
.hx-swap-direction img{
width:18px;
height:18px;
object-fit:contain;
display:block;
}
/* ==========================================================
15. RECEIVING ADDRESS
========================================================== */
.hx-swap-receiving-section{
width:100%;
margin-top:12px;
padding:12px;
background:
linear-gradient(
145deg,
#10243A,
#0C1C30
);
border:
1px solid
rgba(0,168,255,.40);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#receiverLabel{
display:block;
margin-bottom:7px;
color:#73B9FF;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
#receiverAddress{
width:100%;
height:42px;
padding:0 12px;
box-sizing:border-box;
border:
1px solid
rgba(42,105,161,.55);
border-radius:8px;
outline:none;
background:#07182B;
color:#FFFFFF;
font-size:11px;
font-weight:700;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
#receiverAddress::placeholder{
color:#5F7892;
}
#receiverAddress:focus{
border-color:#00A8FF;
box-shadow:
0 0 0 2px rgba(0,168,255,.08);
}
/* ==========================================================
16. AGREEMENT
========================================================== */
.hx-swap-agreement-section{
width:100%;
margin-top:10px;
padding:10px 12px;
background:
rgba(5,16,31,.72);
border:
1px solid
rgba(57,88,123,.30);
border-radius:10px;
}
.hx-swap-agreement-section label{
display:flex;
align-items:flex-start;
gap:8px;
margin:5px 0;
color:#8FA8C0;
font-size:8px;
line-height:1.45;
}
.hx-swap-agreement-section input[type="checkbox"]{
flex:0 0 auto;
width:13px;
height:13px;
margin:0;
accent-color:#25D366;
cursor:pointer;
}
.hx-swap-agreement-section a{
color:#4CC8FF;
font-weight:800;
text-decoration:none;
}
.hx-swap-agreement-section a:hover{
color:#FFFFFF;
text-decoration:underline;
}
/* ==========================================================
17. SWAP BUTTON
========================================================== */
.hx-swap-action{
width:100%;
margin-top:12px;
}
.hx-swap-button{
width:100%;
min-height:45px;
border:0;
border-radius:9px;
background:
linear-gradient(
135deg,
#2563EB 0%,
#4F46E5 45%,
#A855F7 100%
);
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.3px;
cursor:pointer;
box-shadow:
0 8px 20px rgba(79,70,229,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.hx-swap-button:hover{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:
0 12px 28px rgba(79,70,229,.30);
}
.hx-swap-button:active{
transform:translateY(0);
}
/* ==========================================================
18. ORDER CARD
========================================================== */
.hx-order-card{
width:100%;
background:
linear-gradient(
145deg,
#10243A,
#0B1A2D
);
border:
1px solid
rgba(168,85,247,.38);
border-radius:13px;
padding:13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 25px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.hx-order-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:
linear-gradient(
90deg,
#2563EB,
#A855F7
);
opacity:.9;
}
/* ==========================================================
19. ORDER HEADER
========================================================== */
.hx-order-header{
padding-bottom:10px;
margin-bottom:5px;
border-bottom:
1px solid
rgba(92,120,151,.18);
color:#FFFFFF;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
/* ==========================================================
20. ORDER ROW
========================================================== */
.hx-order-row{
min-height:30px;
display:grid;
grid-template-columns:
58px
minmax(0,1fr)
auto;
align-items:center;
gap:7px;
border-bottom:
1px solid
rgba(92,120,151,.12);
}
.hx-order-row span{
color:#7189A2;
font-size:7px;
font-weight:900;
text-transform:uppercase;
}
.hx-order-row strong{
min-width:0;
color:#FFFFFF;
font-size:8px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ==========================================================
21. COPY ORDER
========================================================== */
.hx-copy-order{
min-width:48px;
height:23px;
padding:0 7px;
border:0;
border-radius:6px;
background:
linear-gradient(
135deg,
#2563EB,
#4F46E5
);
color:#FFFFFF;
font-size:7px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
22. ORDER STATUS
========================================================== */
.hx-order-status{
min-height:31px;
display:grid;
grid-template-columns:
58px
1fr;
align-items:center;
gap:7px;
}
.hx-order-status span{
color:#7189A2;
font-size:7px;
font-weight:900;
}
.hx-order-status strong{
color:#25D366;
font-size:8px;
font-weight:900;
}
/* ==========================================================
23. ORDER PROGRESS
========================================================== */
.hx-order-progress{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin-top:8px;
}
.hx-step{
min-height:44px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
background:#0C1C30;
border:
1px solid
rgba(70,100,133,.28);
border-radius:7px;
color:#607994;
font-size:6px;
font-weight:900;
text-align:center;
}
.hx-step span{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172A40;
color:#7890A8;
font-size:6px;
font-weight:900;
}
.hx-step.active{
border-color:
rgba(37,211,102,.38);
color:#25D366;
background:
linear-gradient(
145deg,
rgba(37,211,102,.09),
rgba(7,24,43,.75)
);
}
.hx-step.active span{
background:#25D366;
color:#06140C;
box-shadow:
0 0 10px rgba(37,211,102,.30);
}
/* ==========================================================
24. RESPONSIVE
========================================================== */
@media(max-width:700px){
.hx-swap-card{
padding:12px;
}
.hx-order-card{
padding:12px;
}
}
@media(max-width:500px){
.hx-swap-card{
padding:10px;
border-radius:11px;
}
.hx-swap-card .hx-input-prefix{
min-width:92px;
padding:0 8px;
}
.hx-swap-card .hx-selector-logo{
width:22px;
height:22px;
min-width:22px;
}
.hx-swap-card .hx-buy-amount{
font-size:14px;
}
.hx-order-row{
grid-template-columns:
52px
minmax(0,1fr)
auto;
}
}
/* ==========================================================
25. IMPORTANT
KEEP DROPDOWN ABOVE EVERYTHING
========================================================== */
#swapFromList,
#swapToList{
z-index:999999 !important;
}
/* ==========================================================
26. HOVER POLISH
========================================================== */
.hx-swap-card:hover,
.hx-order-card:hover{
border-color:
rgba(0,168,255,.62);
}
/* ==========================================================
04. ORDER SUMMARY
HTML:
.hx-order-summary
========================================================== */
.hx-order-summary{
width:100%;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
margin:0 0 12px;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
.hx-summary-item{
min-width:0;
min-height:72px;
padding:13px;
display:flex;
flex-direction:column;
justify-content:center;
background:
linear-gradient(
145deg,
#172B45 0%,
#112238 100%
);
border:
1px solid
rgba(59,130,246,.40);
border-radius:11px;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025),
0 5px 15px
rgba(0,0,0,.15);
}
/* ==========================================================
SUMMARY LABEL
========================================================== */
.hx-summary-item small{
display:block;
margin:
0 0 7px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.5px;
line-height:1.2;
}
/* ==========================================================
SUMMARY VALUE
========================================================== */
.hx-summary-item strong{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:#FFFFFF;
font-size:13px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
}
/* ==========================================================
05. COIN ICON
========================================================== */
.hx-summary-item .hx-coin-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius:50%;
font-size:14px;
font-weight:900;
}
/* BTC */
.hx-summary-item .hx-btc-icon{
background:
linear-gradient(
135deg,
#F59E0B,
#F97316
);
color:#FFFFFF;
}
/* XMR */
.hx-summary-item .hx-xmr-icon{
background:
linear-gradient(
135deg,
#F97316,
#EA580C
);
color:#FFFFFF;
}
/* ==========================================================
06. DEPOSIT SECTION
========================================================== */
.hx-deposit-section{
width:100%;
margin:12px 0 0;
padding:15px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.35);
border-radius:12px;
}
/* ==========================================================
SECTION LABEL
========================================================== */
.hx-deposit-section > label,
.hx-destination-section > label{
display:block;
margin-bottom:6px;
color:#8FB8F5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* ==========================================================
ADDRESS TITLE
========================================================== */
.hx-address-title{
display:block;
margin-bottom:8px;
color:#7188A5;
font-size:10px;
}
/* ==========================================================
07. PAYMENT ROW
========================================================== */
.hx-payment-row{
width:100%;
display:grid;
grid-template-columns:
minmax(0,1fr)
105px;
gap:10px;
align-items:stretch;
}
/* ==========================================================
ADDRESS BOX
========================================================== */
.hx-address-box{
min-width:0;
min-height:78px;
padding:10px;
display:flex;
align-items:center;
gap:8px;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.35);
border-radius:9px;
}
/* ==========================================================
PAYMENT ADDRESS
========================================================== */
#hxPayinAddress{
flex:1;
min-width:0;
overflow:hidden;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
COPY BUTTON
========================================================== */
#hxCopyPayin{
flex:0 0 auto;
height:30px;
padding:0 10px;
background:#243B66;
border:
1px solid
rgba(99,102,241,.55);
border-radius:7px;
color:#FFFFFF;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#hxCopyPayin:hover{
background:#4F46E5;
}
/* ==========================================================
QR BOX
========================================================== */
.hx-qr-box{
min-width:0;
min-height:78px;
padding:8px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border-radius:9px;
overflow:hidden;
}
/* ==========================================================
QR IMAGE
========================================================== */
#hxQrCode{
width:100%;
max-width:75px;
height:auto;
aspect-ratio:1 / 1;
object-fit:contain;
}
/* ==========================================================
08. STATUS SECTION
========================================================== */
.hx-status-section{
width:100%;
margin:12px 0 0;
padding:18px 15px;
text-align:center;
background:
linear-gradient(
145deg,
#152943,
#102137
);
border:
1px solid
rgba(99,102,241,.30);
border-radius:12px;
}
/* ==========================================================
09. WAITING ICON
DIAMBIL DARI CSS LAMA YANG SUDAH TERBUKTI
========================================================== */
.hx-progress{
width:38px;
height:38px;
margin:0 auto 11px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
/* HAPUS DOT LAMA */
.hx-progress span{
display:none;
}
/* CINCIN BERPUTAR */
.hx-progress::before{
content:"";
width:32px;
height:32px;
box-sizing:border-box;
border-radius:50%;
border:
3px solid
rgba(217,70,239,.18);
border-top-color:#D946EF;
border-right-color:#A855F7;
animation:
hxSwapSpin
1s
linear
infinite;
}
/* ICON DI TENGAH */
.hx-progress::after{
content:"↕";
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
color:#D946EF;
font-size:15px;
font-weight:900;
line-height:1;
text-shadow:
0 0 8px
rgba(217,70,239,.75);
}
/* ==========================================================
SPIN
========================================================== */
@keyframes hxSwapSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/* ==========================================================
STATUS TITLE
========================================================== */
.hx-status-section h3{
margin:0;
color:#FFFFFF;
font-size:20px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
STATUS DESCRIPTION
========================================================== */
.hx-status-section p{
margin:7px 0 0;
color:#7188A5;
font-size:10px;
line-height:1.45;
}
/* ==========================================================
10. ORDER IDENTIFICATION
========================================================== */
.hx-order-identification{
width:100%;
margin:12px 0 0;
padding:14px 15px;
background:
linear-gradient(
145deg,
#111F34,
#0D1B2E
);
border:
1px solid
rgba(59,130,246,.28);
border-radius:12px;
}
/* ==========================================================
ID ROW
========================================================== */
.hx-order-id-row{
width:100%;
min-height:38px;
display:grid;
grid-template-columns:
120px
minmax(0,1fr);
gap:10px;
align-items:center;
}
.hx-order-id-row + .hx-order-id-row{
border-top:
1px solid
rgba(255,255,255,.05);
}
/* LABEL */
.hx-order-id-row > span{
color:#7188A5;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
/* VALUE */
.hx-order-id-row > strong{
min-width:0;
color:#FFFFFF;
font-size:11px;
font-weight:800;
word-break:break-all;
}
/* ==========================================================
HEREEXC EXPLORER
RIGHT SIDE OF ID AREA
========================================================== */
.hx-order-identification{
position:relative;
}
/* ==========================================================
EXPLORER BUTTON
========================================================== */
.hx-order-identification .hx-explorer-link{
position:absolute;
right:15px;
bottom:15px;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:145px;
height:32px;
margin:0;
padding:0 13px;
background:
linear-gradient(
135deg,
#ff8a00,
#f97316
);
border:
1px solid
rgba(255,174,76,.75);
border-radius:7px;
color:#ffffff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:.35px;
text-decoration:none;
white-space:nowrap;
box-shadow:
0 5px 15px
rgba(249,115,22,.22),
inset 0 1px 0
rgba(255,255,255,.20);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
/* ==========================================================
HOVER
========================================================== */
.hx-order-identification .hx-explorer-link:hover{
color:#ffffff;
background:
linear-gradient(
135deg,
#ff9d2e,
#f97316
);
border-color:
rgba(255,190,110,.95);
box-shadow:
0 7px 22px
rgba(249,115,22,.35),
0 0 12px
rgba(249,115,22,.15);
transform:translateY(-1px);
filter:brightness(1.08);
}
/* ==========================================================
ACTIVE
========================================================== */
.hx-order-identification .hx-explorer-link:active{
transform:translateY(0);
box-shadow:
0 3px 10px
rgba(249,115,22,.20);
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
.hx-order-identification .hx-explorer-link{
position:relative;
right:auto;
bottom:auto;
margin:
10px 0 0 auto;
}
}
@media(max-width:450px){
.hx-order-identification .hx-explorer-link{
width:100%;
min-width:0;
margin-top:10px;
}
}
/* ==========================================================
12. DESTINATION
========================================================== */
.hx-destination-section{
width:100%;
margin:12px 0 0;
padding:14px;
background:
linear-gradient(
145deg,
#162B45,
#102137
);
border:
1px solid
rgba(59,130,246,.30);
border-radius:12px;
}
/* ==========================================================
DESTINATION BOX
========================================================== */
.hx-destination-box{
width:100%;
min-height:45px;
padding:10px 12px;
display:flex;
align-items:center;
background:#0D1C30;
border:
1px solid
rgba(59,130,246,.32);
border-radius:8px;
}
/* ==========================================================
DESTINATION ADDRESS
========================================================== */
#hxWalletAddress{
width:100%;
color:#FFFFFF;
font-size:10px;
font-weight:600;
line-height:1.45;
word-break:break-all;
}
/* ==========================================================
13. INFORMATION
========================================================== */
.hx-info-box{
width:100%;
margin:12px 0 0;
padding:11px 12px;
display:flex;
align-items:flex-start;
gap:9px;
background:
rgba(37,99,235,.08);
border:
1px solid
rgba(59,130,246,.22);
border-radius:9px;
}
/* INFO ICON */
.hx-info-icon{
width:18px;
height:18px;
min-width:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563EB;
color:#FFFFFF;
font-size:10px;
font-weight:900;
}
/* INFO TEXT */
.hx-info-box p{
margin:0;
color:#8FA7C3;
font-size:10px;
line-height:1.5;
}/* ==========================================================
HEREEXC — FINAL POPUP POSITION & PROPORTION
HTML / JS TIDAK DIUBAH
========================================================== */
/* ================================================================
HEREEXC — POPUP MASTER CSS
CLEAN FINAL OVERRIDE
PURPOSE:
- Restore stable popup geometry
- Keep popup centered and scrollable
- Prevent overlays from blocking buttons
- Keep CLOSE / CONFIRM clickable
- Preserve existing HTML / JS
- Do not affect BUY / SELL / SWAP panels
================================================================ */
/* ================================================================
01. POPUP ROOT / VISIBILITY
IMPORTANT:
Do NOT use !important on display.
JavaScript must be able to open/close the popup with
element.style.display.
================================================================ */
#hxSwapPopup{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:calc(100vw - 24px) !important;
height:auto !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
margin:0 !important;
padding:18px !important;
box-sizing:border-box !important;
/* JS controls this value. */
display:none;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483647 !important;
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:1px solid rgba(37,99,235,.70) !important;
border-radius:18px !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
0 0 0 100vmax rgba(3,8,18,.70),
inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:#2563EB #091321;
}
/* JS may use inline display:flex / display:none. */
#hxSwapPopup[style*="display: flex"],
#hxSwapPopup[style*="display:flex"]{
visibility:visible !important;
}
#hxSwapPopup[style*="display: none"],
#hxSwapPopup[style*="display:none"]{
visibility:hidden !important;
}
/* ================================================================
02. POPUP SCROLLBAR
================================================================ */
#hxSwapPopup::-webkit-scrollbar{
width:6px;
}
#hxSwapPopup::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxSwapPopup::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ================================================================
03. CHILDREN SAFETY
================================================================ */
#hxSwapPopup > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
flex:0 0 auto !important;
}
/* Never let decorative layers intercept clicks. */
#hxSwapPopup::before,
#hxSwapPopup::after{
pointer-events:none !important;
}
/* ================================================================
04. HEADER
================================================================ */
#hxSwapPopup .hx-popup-header{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
padding:2px 4px 13px !important;
margin:0 0 11px !important;
text-align:center !important;
border-bottom:1px solid rgba(76,200,255,.15) !important;
}
#hxSwapPopup .hx-popup-header h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.1px !important;
text-align:center !important;
}
/* ==========================================
HEREEXC HEADER FINAL BALANCE
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0 auto;
padding:35px 20px 20px;
display:grid;
grid-template-columns:
1fr auto 1fr;
align-items:center;
gap:30px;
}/* ==========================================
HEADER ROW BACKGROUND
========================================== */
.hx-header{
width:100%;
max-width:1200px;
margin:0px auto 25px;
padding:22px 30px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.20);
border-radius:18px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
box-sizing:border-box;
}
/* ================================================================
05. SEND / RECEIVE SUMMARY
================================================================ */
#hxSwapPopup .hx-order-summary{
position:relative !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 0 11px !important;
padding:0 !important;
}
#hxSwapPopup .hx-summary-item{
min-width:0 !important;
min-height:62px !important;
padding:12px 13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:1px solid rgba(76,200,255,.22) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-summary-item small{
display:block !important;
margin:0 0 7px !important;
color:#7FA0C5 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-summary-item strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1.3 !important;
}
/* ================================================================
06. DEPOSIT SECTION
================================================================ */
#hxSwapPopup .hx-deposit-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:13px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.30) !important;
border-radius:12px !important;
}
#hxSwapPopup .hx-deposit-section > label,
#hxSwapPopup .hx-destination-section > label,
#hxSwapPopup .hx-explorer-box > label{
display:block !important;
margin:0 0 7px !important;
color:#8FB7E7 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.2 !important;
letter-spacing:.65px !important;
}
/* ================================================================
07. PAYMENT ROW / ADDRESS / QR
================================================================ */
#hxSwapPopup .hx-payment-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 90px !important;
gap:10px !important;
align-items:stretch !important;
width:100% !important;
}
#hxSwapPopup .hx-address-box{
min-width:0 !important;
min-height:90px !important;
padding:10px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#0B192B !important;
border:1px solid rgba(59,130,246,.24) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxPayinAddress{
flex:1 1 auto !important;
min-width:0 !important;
color:#D9E5F3 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
#hxSwapPopup #hxCopyPayin{
flex:0 0 auto !important;
min-width:48px !important;
height:30px !important;
padding:0 9px !important;
border:1px solid rgba(59,130,246,.35) !important;
border-radius:7px !important;
background:#1E3A67 !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:20 !important;
}
#hxSwapPopup .hx-qr-box{
width:90px !important;
min-width:90px !important;
max-width:90px !important;
height:90px !important;
min-height:90px !important;
margin:0 !important;
padding:7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#FFFFFF !important;
border-radius:9px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxQrCode{
width:76px !important;
height:76px !important;
max-width:76px !important;
max-height:76px !important;
display:block !important;
object-fit:contain !important;
}
/* ================================================================
08. STATUS / WAITING
================================================================ */
#hxSwapPopup .hx-status-section{
position:relative !important;
z-index:5 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:125px !important;
margin:0 0 11px !important;
padding:18px !important;
text-align:center !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(76,200,255,.20) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-status-loader{
width:28px !important;
height:28px !important;
min-width:28px !important;
margin:0 auto 8px !important;
border:2px solid rgba(59,130,246,.18) !important;
border-top-color:#3B82F6 !important;
border-radius:50% !important;
animation:hxPopupMasterSpin 1s linear infinite !important;
}
@keyframes hxPopupMasterSpin{
to{ transform:rotate(360deg); }
}
#hxSwapPopup .hx-status-section h3,
#hxSwapPopup #hxSwapStatus{
margin:0 !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.25 !important;
}
#hxSwapPopup #hxSwapStatusText{
margin:6px 0 0 !important;
color:#7890AD !important;
font-size:10px !important;
line-height:1.45 !important;
}
/* ================================================================
09. ORDER IDENTIFICATION
================================================================ */
#hxSwapPopup .hx-order-identification{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 11px !important;
padding:11px 13px !important;
background:rgba(8,25,42,.70) !important;
border:1px solid rgba(76,200,255,.18) !important;
border-radius:11px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-order-id-row{
display:grid !important;
grid-template-columns:100px minmax(0,1fr) !important;
align-items:center !important;
gap:10px !important;
min-height:36px !important;
}
#hxSwapPopup .hx-order-id-row > span{
color:#7890AD !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.55px !important;
}
#hxSwapPopup .hx-order-id-row > strong{
min-width:0 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.3 !important;
word-break:break-all !important;
}
#hxSwapPopup .hx-explorer-link{
position:relative !important;
z-index:20 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:max-content !important;
max-width:100% !important;
min-height:32px !important;
margin:7px 0 0 auto !important;
padding:0 12px !important;
background:linear-gradient(135deg,#FF9800,#F97316) !important;
border:1px solid rgba(255,174,76,.75) !important;
border-radius:7px !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* ================================================================
10. DESTINATION
================================================================ */
#hxSwapPopup .hx-destination-section{
position:relative !important;
z-index:5 !important;
width:100% !important;
min-width:0 !important;
margin:0 0 10px !important;
padding:12px !important;
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:1px solid rgba(37,99,235,.25) !important;
border-radius:11px !important;
}
#hxSwapPopup .hx-destination-box{
width:100% !important;
min-height:45px !important;
padding:10px 12px !important;
display:flex !important;
align-items:center !important;
background:#091727 !important;
border:1px solid rgba(59,130,246,.18) !important;
border-radius:8px !important;
box-sizing:border-box !important;
}
#hxSwapPopup #hxWalletAddress{
display:block !important;
width:100% !important;
min-width:0 !important;
color:#B8C9DC !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.45 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
/* ================================================================
11. INFORMATION
================================================================ */
#hxSwapPopup .hx-info-box{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
width:100% !important;
min-height:44px !important;
margin:0 0 11px !important;
padding:9px 11px !important;
background:rgba(24,55,90,.55) !important;
border:1px solid rgba(76,200,255,.16) !important;
border-radius:9px !important;
box-sizing:border-box !important;
}
#hxSwapPopup .hx-info-box > span,
#hxSwapPopup .hx-info-icon{
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#2563EB !important;
color:#FFFFFF !important;
font-size:10px !important;
font-weight:900 !important;
}
#hxSwapPopup .hx-info-box p{
margin:0 !important;
color:#8FA7C3 !important;
font-size:10px !important;
line-height:1.5 !important;
}
/* ================================================================
12. ACTION AREA
CRITICAL: explicit pointer-events + stacking order.
================================================================ */
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
position:relative !important;
z-index:100 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
pointer-events:auto !important;
}
#hxSwapPopup .hx-popup-actions::before,
#hxSwapPopup .hx-popup-actions::after,
#hxSwapPopup .hx-swap-actions::before,
#hxSwapPopup .hx-swap-actions::after{
pointer-events:none !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
position:relative !important;
z-index:101 !important;
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
margin:0 !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border-radius:10px !important;
font-family:inherit !important;
font-size:11px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
user-select:none !important;
pointer-events:auto !important;
opacity:1 !important;
visibility:visible !important;
-webkit-tap-highlight-color:transparent;
}
/* CLOSE */
#hxSwapPopup .hx-close-action,
#hxSwapPopup #hxCloseButton{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:1px solid rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxSwapPopup .hx-close-action:hover,
#hxSwapPopup #hxCloseButton:hover{
background:#1B3049 !important;
border-color:rgba(143,170,200,.48) !important;
}
/* CONFIRM */
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxFinalConfirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:1px solid rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px rgba(37,211,102,.18) !important;
}
#hxSwapPopup .hx-confirm-action:hover,
#hxSwapPopup #hxFinalConfirm:hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px rgba(37,211,102,.28) !important;
}
#hxSwapPopup .hx-close-action:active,
#hxSwapPopup .hx-confirm-action:active,
#hxSwapPopup #hxCloseButton:active,
#hxSwapPopup #hxFinalConfirm:active{
transform:translateY(1px) !important;
}
#hxSwapPopup .hx-close-action:disabled,
#hxSwapPopup .hx-confirm-action:disabled,
#hxSwapPopup #hxCloseButton:disabled,
#hxSwapPopup #hxFinalConfirm:disabled{
cursor:not-allowed !important;
opacity:.65 !important;
transform:none !important;
}
/* ================================================================
13. MOBILE
================================================================ */
@media(max-width:700px){
#hxSwapPopup{
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 20px) !important;
max-height:calc(100dvh - 20px) !important;
padding:13px !important;
border-radius:15px !important;
}
#hxSwapPopup .hx-popup-header h2{
font-size:19px !important;
}
#hxSwapPopup .hx-payment-row{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-qr-box{
width:100% !important;
max-width:none !important;
height:110px !important;
min-height:110px !important;
margin:0 !important;
}
#hxSwapPopup #hxQrCode{
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
}
}
@media(max-width:450px){
#hxSwapPopup{
width:calc(100vw - 14px) !important;
max-width:calc(100vw - 14px) !important;
max-height:calc(100vh - 14px) !important;
max-height:calc(100dvh - 14px) !important;
padding:10px !important;
border-radius:13px !important;
}
#hxSwapPopup .hx-order-summary{
grid-template-columns:1fr !important;
}
#hxSwapPopup .hx-order-id-row{
grid-template-columns:85px minmax(0,1fr) !important;
gap:7px !important;
}
#hxSwapPopup .hx-popup-actions,
#hxSwapPopup .hx-swap-actions{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
#hxSwapPopup .hx-close-action,
#hxSwapPopup .hx-confirm-action,
#hxSwapPopup #hxCloseButton,
#hxSwapPopup #hxFinalConfirm{
height:44px !important;
min-height:44px !important;
font-size:10px !important;
}
}
/* ================================================================
14. FINAL CLICK SAFETY
No pseudo element or decorative layer may sit above actions.
================================================================ */
#hxSwapPopup .hx-popup-actions > *,
#hxSwapPopup .hx-swap-actions > *{
pointer-events:auto !important;
}
#hxSwapPopup a,
#hxSwapPopup button,
#hxSwapPopup input,
#hxSwapPopup textarea,
#hxSwapPopup select{
position:relative;
z-index:10;
}
/* END HEREEXC POPUP MASTER CSS */
/* ==========================================
HEREEXC WEB3 FOUNDATION
========================================== */
body{
margin:0;
background:
radial-gradient(
circle at top,
#102B52,
#050B18 55%
);
color:#fff;
font-family:
Inter,
Arial,
sans-serif;
}
.hx-header,
.hx-main,
.hx-bottom-left-row,
.hx-footer{
width:100%;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}/* =====================================
HEREEXC RESET DESKTOP 100%
===================================== */
body{
font-size:16px !important;
}
/* MAIN CONTAINER */
.hx-app{
max-width:1200px !important;
margin:auto !important;
}
/* HEADER NORMAL */
.hx-header{
min-height:120px !important;
padding:20px !important;
display:grid !important;
grid-template-columns:
1fr auto 1fr !important;
}
.hx-brand-logo{
width:90px !important;
}
/* MAIN 3 COLUMN */
.hx-main{
display:grid !important;
grid-template-columns:
260px
520px
260px !important;
gap:20px !important;
}
/* FONT RESET PANEL */
.hx-widget h2,
.hx-center-panel h2{
font-size:20px !important;
}
.hx-widget,
.hx-center-panel{
font-size:14px !important;
}
/* REMOVE BIG TEXT EFFECT */
.hx-feature strong{
font-size:14px !important;
}
.hx-feature span{
font-size:12px !important;
}/* ==========================================
HEREEXC BALANCE SCALE
========================================== */
/* LEFT LISTING IMAGE FIX */
.hx-listing-list img{
width:40px !important;
height:40px !important;
}
.hx-listing-list li{
min-height:45px !important;
}
/* PANEL TITLE */
.hx-widget-header h2{
font-size:18px !important;
}
/* MAIN FONT */
.hx-main{
font-size:14px !important;
}
/* RIGHT TEXT */
.hx-right-panel{
font-size:13px !important;
}
/* ==========================================
HEREEXC RUNNING MARKET TICKER
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:20px auto;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:
1px solid rgba(0,168,255,.20);
border-radius:14px;
padding:10px 0;
box-sizing:border-box;
}
/* TRACK BERJALAN */
.hx-ticker-track{
display:flex;
align-items:center;
gap:14px;
width:max-content;
animation:
hxTickerMove 28s linear infinite;
}
/* ==========================================
HEREEXC RUNNING MARKET CARD BIG SIZE
========================================== */
.hx-ticker-row{
width:100%;
max-width:950px;
margin:25px auto;
padding:14px 0;
overflow:hidden;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.25);
border-radius:16px;
}
/* TRACK */
.hx-ticker-track{
display:flex;
align-items:center;
gap:18px;
width:max-content;
}
/* ==========================================
HEREEXC GLASS MARKET CARD
========================================== */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
position:relative;
/* GLASS EFFECT */
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
color:white;
overflow:hidden;
}
/* LIGHT REFLECTION */
.hx-ticker-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:60%;
height:100%;
background:
linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent
);
opacity:.35;
}
/* COIN NAME */
.hx-ticker-card strong{
position:relative;
z-index:2;
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
position:relative;
z-index:2;
font-size:13px;
color:#cbd5e1;
}
/* PROFIT */
.hx-ticker-card b{
position:absolute;
top:12px;
right:12px;
padding:3px 8px;
border-radius:20px;
background:
rgba(34,197,94,.20);
border:
1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:11px;
}
/* HOVER */
.hx-ticker-card:hover{
transform:translateY(-5px);
border-color:rgba(0,168,255,.6);
}
/* COIN NAME */
.hx-ticker-card strong{
font-size:16px;
color:#ffffff;
}
/* PRICE */
.hx-ticker-card span{
font-size:14px;
color:#94a3b8;
}
/* PROFIT */
.hx-ticker-card b{
font-size:14px;
color:#22c55e;
}
/* NAMA COIN */
.hx-ticker-card strong{
font-size:14px;
color:#ffffff;
}
/* HARGA */
.hx-ticker-card span{
color:#94a3b8;
font-size:12px;
}
/* PROFIT */
.hx-ticker-card b{
color:#22c55e;
font-size:12px;
}
/* ==========================================
HEREEXC GLASS TICKER RUNNING FIX
========================================== */
/* ==========================================
TICKER ALIGN WITH MAIN GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:1200px !important;
margin:
25px auto 25px !important;
padding:
12px 0 !important;
box-sizing:border-box;
overflow:hidden;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}/* ==========================================
TICKER ALIGN WITH EXCHANGE GRID
========================================== */
.hx-ticker-row{
width:100% !important;
max-width:810px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:20px 0 !important;
overflow:hidden;
box-sizing:border-box;
border-radius:16px;
background:
rgba(16,39,68,.55);
border:
1px solid rgba(0,168,255,.25);
}
/* ==========================================
TICKER MOVE LEFT
========================================== */
.hx-ticker-row{
transform:translateX(-190px) !important;
}
/* TRACK */
.hx-ticker-track{
display:flex;
gap:16px;
width:max-content;
animation:
hxTickerMove 18s linear infinite;
}
/* CARD GLASS */
.hx-ticker-card{
min-width:170px;
height:65px;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-shrink:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);
border:
1px solid rgba(0,168,255,.25);
border-radius:16px;
backdrop-filter:
blur(15px);
box-shadow:
0 10px 30px rgba(0,0,0,.25);
color:white;
font-size:14px;
}
.hx-ticker-card span{
color:#9fb3c8;
font-size:12px;
}
.hx-ticker-card b{
color:#22c55e;
font-size:13px;
}
/* GERAK DARI KANAN KE KIRI */
@keyframes hxTickerMove{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}/* AREA GERAK */
.hx-ticker-track{
display:flex;
gap:18px;
width:max-content;
animation:
hxTickerMove 30s linear infinite;
}/* CARD GLASS */
.hx-ticker-card{
width:150px;
height:90px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
position:relative;
}/* =====================================================
HEREEXC ROW ALIGNMENT V4
===================================================== */
/* SEMUA PANEL START SEJAJAR */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
align-self:start;
}
/* PANEL CARD STYLE */
.hx-widget,
.hx-center-panel{
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:
1px solid rgba(0,168,255,.25);
border-radius:18px;
}
/* LEFT HEIGHT CONTROL */
.hx-left-panel .hx-widget{
margin-bottom:18px;
}
/* CENTER TETAP DOMINAN */
.hx-center-panel{
min-height:620px;
}/* ==========================================
HEREEXC FOOTER SYSTEM
========================================== */
/* FOOTER MAIN */
.hx-footer{
width:100%;
max-width:1200px;
margin:40px auto 0;
padding:25px 20px 15px;
box-sizing:border-box;
}
/* ==========================================
FOOTER CONTENT GRID
========================================== */
.hx-footer-content{
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
align-items:start;
}
/* ==========================================
FOOTER BOX
========================================== */
.hx-footer-box{
display:flex;
align-items:flex-start;
gap:12px;
min-height:70px;
}
/* ICON */
.hx-footer-icon{
font-size:18px;
line-height:1;
padding-top:4px;
}
/* TITLE */
.hx-footer-box h4{
margin:0 0 8px;
font-size:14px;
font-weight:700;
color:#ffffff;
letter-spacing:.3px;
}
/* DESCRIPTION */
.hx-footer-box p{
margin:0;
font-size:12px;
color:#8fa7c7;
line-height:1.5;
}
/* ==========================================
FOOTER BOTTOM
========================================== */
.hx-footer-bottom{
width:100%;
margin-top:30px;
padding-top:15px;
border-top:
1px solid rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-direction:column;
text-align:center;
}
/* COPYRIGHT */
.hx-footer-copy{
font-size:12px;
color:#8fa7c7;
}
/* BRAND */
.hx-footer-brand{
display:flex;
gap:8px;
align-items:center;
font-size:12px;
}
.hx-footer-brand strong{
color:#00a8ff;
}
.hx-footer-brand span{
color:#ffffff;
}.hx-footer{
width:100%;
max-width:1200px;
margin:25px auto 0;
padding:20px;
box-sizing:border-box;
}.hx-footer-box h4{
font-size:13px;
}.hx-footer-bottom{
margin-top:22px;
}/* ==========================================
FOOTER ROW BACKGROUND LIGHT
========================================== */
.hx-footer{
background:
linear-gradient(
145deg,
#0d213d,
#102944
) !important;
border-top:1px solid rgba(0,168,255,.18);
border-radius:18px;
padding:28px 30px;
box-shadow:
0 0 25px rgba(0,168,255,.08);
}/* ==========================================
HEADER FINAL ALIGN
========================================== */
.hx-header{
padding:13z8px 28px !important;
border-radius:16px;
background:
linear-gradient(
145deg,
#102744,
#0b1930
);
border:1px solid rgba(0,168,255,.22);
}.hx-header,
.hx-footer{
width:1100px !important;
max-width:1100px !important;
}/* ==========================================
SHIFT HEADER FOOTER LEFT
========================================== */
.hx-header,
.hx-footer{
transform:translateX(-60px) !important;
}/* ==========================================
RIGHT PANEL ALIGN CENTER HEIGHT
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex-shrink:0;
}
/* TRANSACTION SUMMARY EXTEND */
.hx-summary-widget{
flex:1 !important;
min-height:30px !important;
}
/* SUMMARY BODY */
.hx-summary-widget .hx-widget-body{
height:100% !important;
}/* ==========================================
RIGHT PANEL MATCH CENTER HEIGHT
========================================== */
.hx-main-grid-parent{
align-items:stretch !important;
}
.hx-right-panel{
height:auto !important;
display:flex;
flex-direction:column;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}/* ==========================================
MOVE TICKER ROW UP
========================================== */
.hx-ticker-row,
.hx-ticker{
margin-top:-14px !important;
position:relative !important;
z-index:5 !important;
}
/* TRANSACTION */
.hx-summary-widget{
flex:1 !important;
}/* ==========================================
RIGHT PANEL ALIGN FIX
========================================== */
.hx-right-panel{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
/* SPONSORED */
.hx-sponsored-widget{
flex:0 0 auto !important;
}
/* ==========================================
RIGHT PANEL LOCK HEIGHT
========================================== */
.hx-main-grid-parent{
position:relative !important;
align-items:start !important;
}
/* KUNCI KOLOM KANAN */
.hx-right-panel{
height:100% !important;
overflow:visible !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT FIX
RIGHT PANEL LOCK - PREVENT MARKET OVERVIEW PUSH
========================================================== */
/* Main grid keep independent height */
.hx-main-grid-parent{
align-items:start !important;
grid-template-rows:auto auto !important;
}
/* Right column */
.hx-right-panel{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-self:start !important;
}
/* Sponsored */
.hx-sponsored-widget{
flex:none !important;
}
/* Transaction Summary */
.hx-summary-widget{
flex:none !important;
height:auto !important;
min-height:220px !important;
}
/* Prevent ticker / market row being affected */
.hx-ticker-row,
.hx-market-overview,
.hx-market-widget-row{
position:relative !important;
clear:both !important;
}
/* Keep footer independent */
.hx-footer{
margin-top:25px !important;
}
/* ==========================================
RIGHT PANEL VISUAL EXTEND
NO PUSH MARKET OVERVIEW
========================================== */
.hx-right-panel{
position:relative !important;
}
/* background panjang ke bawah */
.hx-right-panel::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:-200px;
background:
linear-gradient(
145deg,
#101f38,
#081426
);
border:1px solid rgba(0,168,255,.20);
border-radius:16px;
z-index:-1;
}
/* ==========================================================
HEREEXC
RIGHT PANEL V2
BLUEPRINT — MARKET / SPONSORED / CANDLE
========================================================== */
/* ==========================================================
RIGHT PANEL FOUNDATION
========================================================== */
.hx-right-panel{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
align-self:start;
overflow:visible;
}
/* ==========================================================
RIGHT PANEL — EVERY CARD
========================================================== */
.hx-right-panel > .hx-widget{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:
1px solid rgba(0,168,255,.24);
border-radius:
14px;
background:
linear-gradient(
180deg,
rgba(11,25,42,.98),
rgba(6,15,27,.98)
);
}
/* ==========================================================
RIGHT PANEL HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:
10px 12px;
border-bottom:
1px solid rgba(255,255,255,.07);
}
.hx-right-panel .hx-widget-header h2{
margin:0;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#F4F8FF;
}
/* ==========================================================
RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
width:100%;
min-width:0;
padding:12px;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-widget{
min-height:0;
}
.hx-market-widget .hx-widget-body{
display:flex;
flex-direction:column;
gap:10px;
}
.hx-market-item{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hx-market-coin{
min-width:0;
display:flex;
align-items:center;
gap:8px;
}
.hx-market-coin > div{
min-width:0;
}
.hx-market-coin strong{
display:inline-block;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-coin small{
display:block;
margin-top:2px;
font-size:9px;
color:#8FA4BA;
}
.hx-market-price{
flex:0 0 auto;
text-align:right;
}
.hx-market-price strong{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-live-status{
display:block;
font-size:8px;
line-height:1;
font-weight:900;
letter-spacing:.05em;
color:#25D366;
}
/* ==========================================================
COIN DOTS
========================================================== */
.hx-coin-dot{
flex:0 0 8px;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px rgba(0,168,255,.45);
}
.hx-coin-dot.btc{
background:#F7931A;
box-shadow:
0 0 8px rgba(247,147,26,.45);
}
.hx-coin-dot.xmr{
background:#FF6600;
box-shadow:
0 0 8px rgba(255,102,0,.45);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-widget{
min-width:0;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
.hx-sponsored-image{
display:block;
width:100% !important;
max-width:100% !important;
height:auto;
aspect-ratio:1200 / 450;
object-fit:cover;
border-radius:9px;
}
/* ==========================================================
TRANSACTION PANEL
MARKET / WITHDRAW / DEPOSIT
========================================================== */
#hxTransactionPanel{
width:100%;
min-width:0;
overflow:hidden;
}
/* ==========================================================
CRITICAL:
ALL TRANSACTION VIEWS HIDDEN BY DEFAULT
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none !important;
width:100%;
min-width:0;
}
/* ==========================================================
ONLY JS-ACTIVE VIEW IS VISIBLE
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block !important;
}
/* ==========================================================
MARKET CHART VIEW
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="market"]{
min-width:0;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]
.hx-widget-body{
padding:12px;
}
/* ==========================================================
MARKET CHART HEADER
========================================================== */
.hx-market-chart-header{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.hx-market-chart-header strong{
min-width:0;
font-size:12px;
font-weight:800;
color:#F4F8FF;
}
.hx-market-chart-header span{
flex:0 0 auto;
font-size:9px;
font-weight:800;
color:#8FA4BA;
}
/* ==========================================================
CANDLE AREA
IMPORTANT:
JS CALCULATES CANVAS FROM THIS CONTAINER WIDTH/HEIGHT
========================================================== */
.hx-candle-area{
position:relative;
width:100%;
min-width:0;
min-height:240px;
height:240px;
overflow:hidden;
border-radius:9px;
background:
linear-gradient(
180deg,
rgba(7,18,31,.95),
rgba(5,13,24,.98)
);
border:
1px solid rgba(255,255,255,.055);
}
/* ==========================================================
JS CANVAS
========================================================== */
#hxMarketChartCanvas{
display:block;
width:100%;
max-width:100%;
height:100%;
}
/* ==========================================================
CHART LOADING
========================================================== */
#hxMarketChartLoading{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
text-align:center;
font-size:10px;
color:#8FA4BA;
pointer-events:none;
}
/* ==========================================================
PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
width:100%;
height:100%;
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:10px;
letter-spacing:.05em;
color:#60758D;
}
/* ==========================================================
WITHDRAW / DEPOSIT VIEW
IMPORTANT:
They remain hidden until JS activates them.
========================================================== */
#hxTransactionPanel
[data-hx-transaction-view="withdraw"],
#hxTransactionPanel
[data-hx-transaction-view="deposit"],
#hxTransactionPanel
[data-hx-transaction-view="history"]{
width:100%;
min-width:0;
}
/* ==========================================================
TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
flex:0 0 auto;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:8px;
background:
rgba(255,255,255,.05);
color:#F4F8FF;
cursor:pointer;
}
/* ==========================================================
HISTORY IS AN OVERLAY
NOT PART OF RIGHT PANEL FLOW
========================================================== */
#hxTransactionHistoryDropdown{
display:none;
}
#hxTransactionHistoryDropdown.is-open{
display:block;
}
/* ==========================================================
RIGHT PANEL — CHILDREN CANNOT FORCE WIDTH
========================================================== */
.hx-right-panel > *,
.hx-right-panel .hx-widget > *,
.hx-right-panel .hx-widget-body > *{
min-width:0;
max-width:100%;
}
/* ==========================================================
CANDLE / IMAGE / CANVAS SAFETY
========================================================== */
.hx-right-panel canvas,
.hx-right-panel img{
max-width:100%;
}
/* ==========================================================
DESKTOP CHART
========================================================== */
@media (min-width:901px){
.hx-candle-area{
height:240px;
min-height:240px;
}
}
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width:900px){
.hx-right-panel{
width:100%;
gap:10px;
}
.hx-candle-area{
height:250px;
min-height:250px;
}
.hx-sponsored-widget .hx-widget-body{
padding:10px;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:600px){
.hx-candle-area{
height:230px;
min-height:230px;
}
.hx-market-item{
gap:8px;
}
}/* ==========================================================
HEREEXC PREMIUM SPACE
RIGHT PANEL VISUAL UPGRADE
VISUAL ONLY — DO NOT AFFECT JS / LAYOUT
========================================================== */
/* ==========================================================
1. RIGHT PANEL ATMOSPHERE
========================================================== */
.hx-right-panel{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.08),
transparent 45%
);
}
/* ==========================================================
2. PREMIUM GLASS CARDS
========================================================== */
.hx-right-panel > .hx-widget{
background:
linear-gradient(
145deg,
rgba(18,45,72,.96),
rgba(9,27,47,.97)
) !important;
border:
1px solid rgba(0,168,255,.34) !important;
border-radius:
16px !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.055),
inset 0 -1px 0
rgba(0,0,0,.25),
0 8px 25px
rgba(0,0,0,.22),
0 0 18px
rgba(0,168,255,.045);
}
/* ==========================================================
3. PREMIUM HEADER
========================================================== */
.hx-right-panel .hx-widget-header{
background:
linear-gradient(
180deg,
rgba(24,55,85,.72),
rgba(13,35,58,.48)
);
border-bottom:
1px solid rgba(76,200,255,.13) !important;
box-shadow:
inset 0 -1px 0
rgba(0,168,255,.035);
}
.hx-right-panel .hx-widget-header h2{
color:#F5FAFF !important;
text-shadow:
0 0 12px
rgba(76,200,255,.16);
}
/* ==========================================================
4. RIGHT PANEL BODY
========================================================== */
.hx-right-panel .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(13,35,58,.30),
rgba(7,22,39,.20)
);
}
/* ==========================================================
5. LIVE MARKET
========================================================== */
.hx-market-widget{
background:
linear-gradient(
145deg,
rgba(18,48,77,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-market-widget .hx-widget-body{
background:
radial-gradient(
circle at 0% 0%,
rgba(0,168,255,.055),
transparent 55%
);
}
.hx-market-item{
padding:
5px 4px;
border-bottom:
1px solid rgba(255,255,255,.035);
transition:
background .2s ease,
transform .2s ease;
}
.hx-market-item:last-child{
border-bottom:0;
}
.hx-market-item:hover{
background:
rgba(0,168,255,.055);
border-radius:
8px;
}
.hx-market-coin strong,
.hx-market-price strong{
text-shadow:
0 0 10px
rgba(255,255,255,.08);
}
.hx-market-coin small{
color:#91ABC3 !important;
}
/* ==========================================================
6. LIVE STATUS
========================================================== */
.hx-live-status{
text-shadow:
0 0 8px
rgba(37,211,102,.45);
}
/* ==========================================================
7. COIN DOT PREMIUM GLOW
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.5),
0 0 12px rgba(0,168,255,.16) !important;
}
.hx-coin-dot.btc{
box-shadow:
0 0 5px rgba(247,147,26,.6),
0 0 12px rgba(247,147,26,.18) !important;
}
.hx-coin-dot.xmr{
box-shadow:
0 0 5px rgba(255,102,0,.6),
0 0 12px rgba(255,102,0,.18) !important;
}
/* ==========================================================
8. SPONSORED CARD
========================================================== */
.hx-sponsored-widget{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
.hx-sponsored-widget .hx-widget-body{
background:
linear-gradient(
180deg,
rgba(0,168,255,.035),
transparent
);
}
.hx-sponsored-image{
border:
1px solid rgba(76,200,255,.18);
box-shadow:
0 5px 18px
rgba(0,0,0,.25),
0 0 12px
rgba(0,168,255,.06);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hx-sponsored-image:hover{
transform:
translateY(-1px);
box-shadow:
0 8px 22px
rgba(0,0,0,.3),
0 0 18px
rgba(0,168,255,.12);
}
/* ==========================================================
9. MARKET CHART CARD
========================================================== */
#hxTransactionPanel{
background:
linear-gradient(
145deg,
rgba(17,45,72,.98),
rgba(8,27,47,.98)
) !important;
}
#hxTransactionPanel
[data-hx-transaction-view="market"]{
background:
linear-gradient(
180deg,
rgba(15,42,68,.30),
rgba(5,20,36,.18)
);
}
/* ==========================================================
10. CHART HEADER
========================================================== */
.hx-market-chart-header{
padding:
2px 2px 4px;
}
.hx-market-chart-header strong{
color:#F4F9FF !important;
text-shadow:
0 0 10px
rgba(76,200,255,.12);
}
.hx-market-chart-header span{
color:#8FAAC2 !important;
}
/* ==========================================================
11. PREMIUM CHART FRAME
========================================================== */
.hx-candle-area{
background:
linear-gradient(
145deg,
#102A44,
#0A2036 48%,
#081A2E
) !important;
border:
1px solid rgba(0,168,255,.20) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
inset 0 0 35px
rgba(0,168,255,.025),
0 4px 15px
rgba(0,0,0,.20);
}
/* ==========================================================
12. CHART GRID ATMOSPHERE
========================================================== */
.hx-candle-area::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
rgba(76,200,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.025) 1px,
transparent 1px
);
background-size:
32px 32px;
opacity:.55;
z-index:0;
}
/* ==========================================================
13. CANVAS ABOVE ATMOSPHERE
========================================================== */
#hxMarketChartCanvas{
position:relative;
z-index:1;
}
/* ==========================================================
14. CHART LOADING
========================================================== */
#hxMarketChartLoading{
background:
radial-gradient(
circle,
rgba(0,168,255,.06),
transparent 65%
);
color:#9AB2C9 !important;
}
/* ==========================================================
15. CHART PLACEHOLDER
========================================================== */
.hx-chart-placeholder{
background:
radial-gradient(
circle at center,
rgba(0,168,255,.05),
transparent 65%
);
color:#7690A8 !important;
}
/* ==========================================================
16. TRANSACTION BACK BUTTON
========================================================== */
.hx-transaction-back{
background:
linear-gradient(
145deg,
rgba(30,65,96,.9),
rgba(13,38,63,.9)
) !important;
border:
1px solid rgba(76,200,255,.14);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04);
transition:
all .2s ease;
}
.hx-transaction-back:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.35);
box-shadow:
0 0 12px
rgba(0,168,255,.12);
}
/* ==========================================================
17. PREMIUM EDGE LIGHT
========================================================== */
.hx-right-panel > .hx-widget{
position:relative;
}
.hx-right-panel > .hx-widget::after{
content:"";
position:absolute;
top:0;
left:18px;
right:18px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(76,200,255,.28),
transparent
);
pointer-events:none;
}
/* ==========================================================
18. ACTIVE / PREMIUM BLUE GLOW
========================================================== */
.hx-right-panel > .hx-widget:hover{
border-color:
rgba(0,168,255,.42) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 10px 28px
rgba(0,0,0,.24),
0 0 22px
rgba(0,168,255,.055);
}
/* ==========================================================
19. MOBILE SAFETY
========================================================== */
@media (max-width:900px){
.hx-right-panel > .hx-widget{
border-radius:
14px !important;
}
}
@media (max-width:600px){
.hx-right-panel > .hx-widget{
border-radius:
12px !important;
}
}
/* ==========================================
HEREEXC MOVE MAIN PANELS UP
========================================== */
.hx-main-grid-parent{
margin-top:-15px !important;
}/* ==========================================
HEREEXC HEADER FINAL ALIGNMENT
========================================== */
.hx-header{
min-height:140px !important;
padding:18px 30px !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
}
/* LEFT & RIGHT */
.hx-header-features{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-left{
justify-content:flex-start !important;
}
.hx-right{
justify-content:flex-end !important;
}
/* FEATURE ITEM */
.hx-feature{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.hx-feature strong{
font-size:14px !important;
font-weight:700 !important;
}
.hx-feature span{
font-size:13px !important;
opacity:.85;
}
/* CENTER BRAND */
.hx-brand{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.hx-brand-logo{
width:65px !important;
height:65px !important;
object-fit:contain !important;
}
.hx-brand p{
margin-top:8px !important;
font-size:15px !important;
white-space:nowrap !important;
}/* ==========================================
WEB3 GLASS PANELS
========================================== */
.hx-header,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-footer,
.hx-ticker-row{
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
background:
linear-gradient(
145deg,
rgba(16,39,68,.75),
rgba(8,20,38,.85)
) !important;
}/* ==========================================
WEB3 BORDER GLOW
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
border-color:
rgba(0,168,255,.35) !important;
box-shadow:
0 0 25px
rgba(0,168,255,.08),
inset 0 0 20px
rgba(0,168,255,.04);
}/* ==========================================
WEB3 CARD HOVER
========================================== */
.hx-center-panel div,
.hx-left-panel div,
.hx-right-panel div{
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hx-center-panel div:hover{
border-color:#00A8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.25);
}/* ==========================================
WEB3 DIGITAL GRID
========================================== */
.hx-main::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:
40px 40px;
pointer-events:none;
z-index:-1;
}/* ==========================================
HEREEXC WEB3 ANIMATED BORDER
NO LAYOUT CHANGE
========================================== */
.hx-center-panel,
.hx-left-panel,
.hx-right-panel{
position:relative !important;
overflow:hidden !important;
}
/* ==========================================
WEB3 BUTTON GLOW
========================================== */
.hx-buy-button,
.hx-sell-button,
.hx-swap-button{
position:relative;
overflow:hidden;
}
.hx-buy-button{
box-shadow:
0 0 25px
rgba(37,211,102,.45);
}
.hx-sell-button{
box-shadow:
0 0 25px
rgba(249,115,22,.45);
}
.hx-swap-button{
box-shadow:
0 0 25px
rgba(109,93,246,.45);
}/* ==========================================
HEREEXC HOLOGRAM LOGO
========================================== */
.hx-brand-logo{
position:relative;
filter:
drop-shadow(
0 0 12px rgba(0,168,255,.45)
)
drop-shadow(
0 0 25px rgba(109,93,246,.25)
);
animation:
hxLogoPulse 4s ease-in-out infinite;
}
@keyframes hxLogoPulse{
0%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
50%{
filter:
drop-shadow(
0 0 28px rgba(0,168,255,.75)
);
}
100%{
filter:
drop-shadow(
0 0 10px rgba(0,168,255,.35)
);
}
}/* ==========================================
BRAND WEB3 TEXT
========================================== */
.hx-brand p{
font-weight:600 !important;
letter-spacing:
1.5px !important;
color:#dbeafe !important;
text-shadow:
0 0 12px
rgba(0,168,255,.45);
}/* ==========================================
SECURITY FEATURE EFFECT
========================================== */
.hx-feature{
position:relative;
}
.hx-feature::before{
content:"";
position:absolute;
left:-8px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:
translateY(-50%);
}/* ==========================================
ONLINE STATUS PULSE
========================================== */
.hx-footer-icon{
animation:
hxStatusPulse 2s infinite;
}
@keyframes hxStatusPulse{
0%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.15);
}
100%{
opacity:.7;
transform:scale(1);
}
}/* ==========================================
CENTER PANEL WEB3 GRID
========================================== */
.hx-center-panel{
background-image:
linear-gradient(
rgba(0,168,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,168,255,.04) 1px,
transparent 1px
) !important;
background-size:
25px 25px !important;
}/* ==========================================
HEREEXC WEB3 MARKET CARD
========================================== */
.hx-market-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
) !important;
border:
1px solid rgba(0,168,255,.25) !important;
}
.hx-market-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
animation:
hxMarketScan 5s infinite;
}
@keyframes hxMarketScan{
0%{
left:-100%;
}
50%{
left:130%;
}
100%{
left:130%;
}
}/* ==========================================
LIVE MARKET PULSE
========================================== */
.hx-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
animation:
hxLivePulse 1.5s infinite;
}
@keyframes hxLivePulse{
0%{
transform:scale(1);
opacity:.6;
}
50%{
transform:scale(1.5);
opacity:1;
}
100%{
transform:scale(1);
opacity:.6;
}
}/* ==========================================
TRANSACTION SECURITY PANEL
========================================== */
.hx-summary-widget{
background:
linear-gradient(
145deg,
rgba(0,168,255,.08),
rgba(109,93,246,.06)
) !important;
}
.hx-summary-widget::after{
content:"SECURE";
position:absolute;
right:15px;
top:15px;
font-size:10px;
letter-spacing:2px;
color:#22c55e;
opacity:.7;
}/* ==========================================
EXCHANGE ENGINE DEPTH
========================================== */
.hx-center-panel{
box-shadow:
0 20px 60px
rgba(0,0,0,.45),
inset 0 0 40px
rgba(0,168,255,.05)
!important;
}/* ==========================================
ACTION BUTTON GLASS
========================================== */
.hx-action-button{
overflow:hidden;
}
.hx-action-button::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:
translateX(-100%);
animation:
hxButtonShine 4s infinite;
}
@keyframes hxButtonShine{
0%{
transform:translateX(-100%);
}
40%{
transform:translateX(120%);
}
100%{
transform:translateX(120%);
}
}/* ==========================================
HEREEXC WEB3 NETWORK FIELD
========================================== */
.hx-app{
position:relative;
overflow:hidden;
}
.hx-app::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
circle,
rgba(0,168,255,.18) 1px,
transparent 1px
);
background-size:
45px 45px;
opacity:.25;
pointer-events:none;
z-index:0;
}/* ==========================================
WEB3 WALLET BUTTON
========================================== */
.hx-wallet-button{
background:
linear-gradient(
135deg,
#00A8FF,
#6D5DF6
) !important;
color:white !important;
border-radius:14px !important;
padding:12px 22px !important;
font-weight:700;
box-shadow:
0 0 25px
rgba(0,168,255,.45);
}/* ==========================================
COIN WEB3 AVATAR
========================================== */
.hx-coin-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
rgba(255,255,255,.2),
rgba(255,255,255,.05)
);
border:
1px solid rgba(255,255,255,.25);
box-shadow:
inset 0 0 15px
rgba(0,168,255,.25),
0 0 15px
rgba(0,168,255,.2);
}/* ==========================================
AI ENGINE STATUS
========================================== */
.hx-engine-status{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#22c55e;
}
.hx-engine-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 15px #22c55e;
animation:
hxEnginePulse 1.8s infinite;
}
@keyframes hxEnginePulse{
50%{
transform:scale(1.5);
opacity:.5;
}
}/* ==========================================
BLOCKCHAIN TRANSACTION LINE
========================================== */
.hx-summary-widget p{
position:relative;
padding-left:18px;
}
.hx-summary-widget p::before{
content:"";
position:absolute;
left:0;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 12px #00A8FF;
transform:translateY(-50%);
}/* ==========================================
HEREEXC HOLOGRAM ENERGY RING
========================================== */
.hx-brand{
position:relative !important;
}
.hx-brand::before{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,168,255,.18),
transparent 65%
);
filter:blur(5px);
animation:
hxHoloPulse 4s infinite;
z-index:0;
}
.hx-brand-logo,
.hx-brand p{
position:relative;
z-index:2;
}
@keyframes hxHoloPulse{
0%{
transform:scale(.85);
opacity:.4;
}
50%{
transform:scale(1.15);
opacity:.9;
}
100%{
transform:scale(.85);
opacity:.4;
}
}/* ==========================================
WEB3 CONNECTION LINE
========================================== */
.hx-main::before{
content:"";
position:absolute;
top:40%;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.25),
transparent
);
opacity:.5;
pointer-events:none;
}/* ==========================================
EXCHANGE CORE ENERGY
========================================== */
.hx-center-panel{
box-shadow:
0 0 50px
rgba(0,168,255,.12),
inset 0 0 35px
rgba(0,168,255,.04)
!important;
}/* ==========================================
HEREEXC WEB3 FLOATING PARTICLES
========================================== */
.hx-app::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 15px #00A8FF,
0 0 40px rgba(0,168,255,.6);
top:25%;
left:12%;
animation:
hxParticleFloat 7s ease-in-out infinite;
pointer-events:none;
}
@keyframes hxParticleFloat{
0%{
transform:
translateY(0);
opacity:.3;
}
50%{
transform:
translateY(-70px);
opacity:1;
}
100%{
transform:
translateY(0);
opacity:.3;
}
}/* ==========================================
WEB3 WALLET CONNECTED
========================================== */
.hx-wallet-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:20px;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(34,197,94,.35);
color:#22c55e;
font-size:12px;
}
.hx-wallet-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:
0 0 12px #22c55e;
}/* ==========================================
SECURITY SHIELD GLOW
========================================== */
.hx-feature:first-child{
}
.hx-feature:first-child::after{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:50%;
background:
rgba(0,168,255,.12);
filter:blur(8px);
animation:
hxShieldPulse 3s infinite;
}
@keyframes hxShieldPulse{
0%{
transform:scale(.8);
opacity:.4;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(.8);
opacity:.4;
}
}/* ==========================================
BLOCKCHAIN NETWORK BADGE
========================================== */
.hx-network-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:12px;
background:
rgba(0,168,255,.08);
border:
1px solid rgba(0,168,255,.25);
font-size:11px;
color:#dbeafe;
}/* ==========================================
WEB3 GLASS REFLECTION
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel,
.hx-header,
.hx-footer{
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}/* ==========================================
WEB3 3D DEPTH
========================================== */
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
box-shadow:
0 25px 60px
rgba(0,0,0,.35),
inset 0 0 30px
rgba(0,168,255,.05);
}/* ==========================================
HEREEXC LEFT PANEL WEB3 DESIGN
========================================== */
/* PANEL KIRI */
.hx-left-panel{
position:relative;
background:
linear-gradient(
145deg,
rgba(20,45,75,.95),
rgba(5,15,35,.98)
);
border:1px solid rgba(0,168,255,.25);
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 35px rgba(0,168,255,.12),
inset 0 0 25px rgba(0,168,255,.05);
}
/* HEADER PANEL */
.hx-left-panel .hx-widget-header h2{
font-size:18px;
color:#ffffff;
letter-spacing:.5px;
}
/* LIST COIN */
.hx-listing-list{
padding:0;
margin:0;
list-style:none;
}
/* ITEM COIN */
.hx-listing-list li{
display:flex;
align-items:center;
gap:14px;
padding:12px;
margin-bottom:10px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:.3s;
}
.hx-listing-list li:hover{
transform:translateX(5px);
background:
rgba(0,168,255,.12);
border-color:
rgba(0,168,255,.5);
}
/* ==========================================
SEMUA LOGO COIN JADI BULAT
HANYA PANEL KIRI
========================================== */
.hx-left-panel
.hx-listing-list
li img{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.18);
box-shadow:
0 0 15px rgba(0,168,255,.35);
}
/* NAMA COIN */
.hx-listing-list li span{
color:white;
font-size:16px;
font-weight:600;
}
/* ==========================================
HEREEXC NEW LISTINGS GRID
4 COIN PER ROW
========================================== */
.hx-left-panel .hx-listing-list{
display:grid !important;
grid-template-columns:
repeat(4,1fr);
gap:10px;
padding:0;
list-style:none;
}
/* COIN CARD */
.hx-left-panel
.hx-listing-list li{
height:70px;
display:flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
padding:8px!important;
margin:0!important;
border-radius:14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:
1px solid rgba(0,168,255,.22);
}
/* LOGO BULAT */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
border-radius:50%;
padding:3px;
}
/* TEXT COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:11px!important;
font-weight:700;
text-align:center;
}
/* HOVER */
.hx-left-panel
.hx-listing-list li:hover{
transform:
translateY(-3px);
border-color:#00A8FF;
box-shadow:
0 0 18px
rgba(0,168,255,.35);
}
/* LINK VIEW ALL */
.hx-widget-link{
color:#00A8FF!important;
font-weight:600;
}
/* ==========================================
HEREEXC LISTING CARD FIX
16 COIN GRID
========================================== */
.hx-left-panel .hx-listing-list{
grid-template-columns:
repeat(4,1fr)!important;
gap:8px!important;
}
/* CARD */
.hx-left-panel
.hx-listing-list li{
width:100%!important;
height:68px!important;
padding:6px!important;
overflow:hidden;
}
/* ICON */
.hx-left-panel
.hx-listing-list li img{
width:28px!important;
height:28px!important;
flex-shrink:0;
}
/* NAMA COIN */
.hx-left-panel
.hx-listing-list li span{
font-size:12px!important;
white-space:nowrap!important;
overflow:hidden;
text-overflow:ellipsis;
max-width:45px;
display:block;
}/* MOVE COIN GRID SLIGHTLY LEFT */
.hx-left-panel .hx-listing-list{
position:relative;
left:-16px;
}/* ==========================================
HEREEXC LIST COIN SECONDARY BUTTON
========================================== */
.hx-coin-list-button{
width:85%!important;
margin:12px auto 0!important;
display:block;
padding:8px 0!important;
border-radius:10px!important;
background:
rgba(255,255,255,.06)!important;
border:
1px solid rgba(255,255,255,.18)!important;
color:#9CCBFF!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
box-shadow:
inset 0 0 15px rgba(255,255,255,.03);
}
/* HOVER */
.hx-coin-list-button:hover{
background:
rgba(0,168,255,.15)!important;
border-color:#00A8FF!important;
color:white!important;
transform:translateY(-2px);
}/* ==========================================================
HEREEXC WALLET
PREMIUM NAVY EDITION
CLEAN REBUILD
========================================================== */
/* ==========================================================
01 — WALLET ROW
========================================================== */
.hx-wallet-row{
width:100%;
min-height:48px;
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:6px 0;
box-sizing:border-box;
position:relative;
z-index:500;
}
/* ==========================================================
02 — WALLET BALANCE
========================================================== */
.hx-wallet-balance{
flex:1 1 auto;
min-width:0;
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px;
box-sizing:border-box;
border-radius:9px;
background:#0D2036 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.22);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 15px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.045);
}
/* BALANCE */
.hx-wallet-balance span{
color:#8194A6;
font-size:9px;
font-weight:800;
letter-spacing:1px;
line-height:1;
white-space:nowrap;
}
/* VALUE */
.hx-wallet-balance strong{
color:#F2F7FA;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
}
/* ==========================================================
03 — ALL ASSET BUTTON
========================================================== */
.hx-wallet-select{
flex:0 0 auto;
width:78px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:10px;
font-weight:800;
letter-spacing:.3px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-select:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
04 — HISTORY
========================================================== */
.hx-history-button{
flex:0 0 auto;
width:82px;
height:42px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.24);
background:#0D2036 !important;
background-image:none !important;
color:#DCE7EE;
font-size:9px;
font-weight:800;
letter-spacing:.7px;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-history-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.48);
color:#FFFFFF;
box-shadow:
0 0 14px
rgba(37,211,102,.10);
}
/* ==========================================================
05 — WALLET MENU
========================================================== */
.hx-wallet-menu{
position:relative;
flex:0 0 auto;
display:flex;
align-items:center;
z-index:1000;
}
/* ==========================================================
06 — WALLET BUTTON
========================================================== */
.hx-wallet-button{
width:145px;
height:42px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:9px;
border:1px solid rgba(37,211,102,.40);
background:#0D2036 !important;
background-image:none !important;
color:#EAF7F0;
font-size:9px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 16px
rgba(0,0,0,.22),
0 0 12px
rgba(37,211,102,.07);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.hx-wallet-button:hover{
background:#122A45 !important;
border-color:rgba(37,211,102,.68);
color:#FFFFFF;
box-shadow:
0 6px 18px
rgba(0,0,0,.25),
0 0 18px
rgba(37,211,102,.14);
}
/* ==========================================================
07 — WALLET ACTIVE
========================================================== */
.hx-wallet-menu.active
.hx-wallet-button{
background:#122A45 !important;
border-color:rgba(37,211,102,.72);
color:#FFFFFF;
box-shadow:
0 7px 20px
rgba(0,0,0,.28),
0 0 20px
rgba(37,211,102,.16);
}
/* ==========================================================
08 — DROPDOWN
========================================================== */
.hx-wallet-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
width:200px;
padding:7px;
display:none;
flex-direction:column;
gap:3px;
box-sizing:border-box;
background:#0B1C30 !important;
background-image:none !important;
border:1px solid rgba(37,211,102,.32);
border-radius:11px;
box-shadow:
0 20px 50px
rgba(0,0,0,.48),
0 0 22px
rgba(37,211,102,.08);
z-index:99999;
}
/* OPEN */
.hx-wallet-menu.active
.hx-wallet-dropdown{
display:flex;
}
/* ==========================================================
09 — DROPDOWN BUTTONS
========================================================== */
.hx-wallet-dropdown button{
width:100%;
min-height:38px;
padding:0 13px;
margin:0;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:7px;
background:#0B1C30 !important;
background-image:none !important;
color:#C8D5DE;
font-size:10px;
font-weight:800;
letter-spacing:.35px;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* HOVER */
.hx-wallet-dropdown button:hover{
background:#122A45 !important;
color:#FFFFFF;
box-shadow:
inset 2px 0 0 #25D366,
0 0 10px
rgba(37,211,102,.06);
}
/* ==========================================================
10 — SPECIFIC ACTIONS
========================================================== */
#hxCreateWallet{
color:#E0EBE5;
}
#hxAddCoin{
color:#C9D6DE;
}
#hxSendButton{
color:#D1DCE2;
}
#hxReceiveButton{
color:#DCE8E1;
}
/* ==========================================================
11 — DIVIDER
========================================================== */
.hx-wallet-divider{
width:100%;
height:1px;
margin:4px 0;
background:rgba(37,211,102,.14);
}
/* ==========================================================
12 — FORCE NAVY
Menghapus background lama yang mungkin masih aktif
========================================================== */
.hx-wallet-row,
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button,
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0D2036 !important;
background-image:none !important;
}
/* Dropdown sedikit lebih gelap */
.hx-wallet-dropdown,
.hx-wallet-dropdown button{
background-color:#0B1C30 !important;
}
/* ==========================================================
13 — FOCUS
========================================================== */
.hx-wallet-row button:focus{
outline:none;
}
.hx-wallet-row button:focus-visible{
outline:1px solid rgba(37,211,102,.65);
outline-offset:2px;
}
/* ==========================================================
14 — MOBILE
========================================================== */
@media(max-width:700px){
.hx-wallet-row{
gap:6px;
}
.hx-wallet-balance{
padding:0 10px;
}
.hx-wallet-balance span{
font-size:8px;
}
.hx-wallet-balance strong{
font-size:11px;
}
.hx-wallet-select{
width:66px;
}
.hx-history-button{
width:66px;
}
.hx-wallet-button{
width:115px;
}
}
/* ==========================================================
15 — SMALL MOBILE
========================================================== */
@media(max-width:480px){
.hx-wallet-row{
gap:5px;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px;
}
.hx-wallet-balance{
padding:0 9px;
}
.hx-wallet-balance span{
font-size:7px;
}
.hx-wallet-balance strong{
font-size:10px;
}
.hx-wallet-select{
width:58px;
font-size:8px;
}
.hx-history-button{
width:58px;
font-size:8px;
}
.hx-wallet-button{
width:100px;
font-size:8px;
}
.hx-wallet-dropdown{
width:180px;
}
}
/* ==========================================================
16 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-wallet-row *{
transition:none !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
FINAL LAYOUT ALIGNMENT
----------------------------------------------------------
TARGET:
LEFT PANEL | MAIN PANEL | RIGHT PANEL
-------------------------------------
MARKET SLOT
=====================================
Market Slot mengikuti batas luar layout utama.
========================================================== */
/* ==========================================================
01 — MARKET SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
transform:none !important;
clear:both;
}
/* ==========================================================
02 — MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
03 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
04 — 7 COLUMN GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
05 — HEADER + DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header,
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
width:100% !important;
max-width:none !important;
min-width:0 !important;
}
/* ==========================================================
06 — REMOVE DESKTOP 90% WIDTH
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:0 !important;
}
}
/* ==========================================================
07 — LARGE DESKTOP
========================================================== */
@media(min-width:1200px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================
08 — IF MARKET SECTION IS INSIDE THE MAIN GRID
========================================================== */
.hx-market-slot-section{
grid-column:1 / -1;
}
/* ==========================================================
09 — PREVENT FLOAT / POSITION SHIFT
========================================================== */
.hx-market-slot-section{
float:none !important;
inset:auto !important;
}
/* ==========================================================
10 — BOX ALIGNMENT
========================================================== */
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
11 — MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin:0 !important;
grid-column:1 / -1;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM TERMINAL V3
----------------------------------------------------------
LAYOUT:
LEFT | MAIN | RIGHT
===================
MARKET SLOT
===================
7 COLUMNS:
FIAT | BTC | XMR | SLOT A | SLOT B | SLOT C | SELECTED
JS / HTML CLASS / ID TIDAK DIUBAH
========================================================== */
/* ==========================================================
01 — OUTER SECTION
========================================================== */
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:14px 0 0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both;
align-self:stretch;
justify-self:stretch;
}
/* ==========================================================
02 — MAIN MARKET PANEL
========================================================== */
.hx-market-slot-section
.hx-market-slot{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative;
overflow:visible !important;
border:
1px solid rgba(0,168,255,.32);
border-radius:13px;
background:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
background-image:
linear-gradient(
145deg,
#102B48 0%,
#0C223A 48%,
#091B2E 100%
) !important;
box-shadow:
0 14px 32px
rgba(0,0,0,.28),
0 0 20px
rgba(0,168,255,.035),
inset 0 1px 0
rgba(255,255,255,.045);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-market-widget
.hx-widget-header{
width:100%;
min-height:52px;
margin:0;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
border-bottom:
1px solid rgba(0,168,255,.15);
border-radius:13px 13px 0 0;
background:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
background-image:
linear-gradient(
180deg,
#123552 0%,
#0D2944 100%
) !important;
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
padding:0;
color:#F5FAFF;
font-size:16px;
font-weight:900;
line-height:1;
letter-spacing:.55px;
text-shadow:
0 1px 8px rgba(0,0,0,.18);
}
/* ==========================================================
05 — LIVE MARKET
========================================================== */
.hx-market-slot-section
.hx-market-live{
position:relative;
display:flex;
align-items:center;
gap:6px;
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}
/* LIVE DOT */
.hx-market-slot-section
.hx-market-live::before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#25D366;
box-shadow:
0 0 9px
rgba(37,211,102,.72);
animation:
hxMarketLivePulse
1.8s
ease-in-out
infinite;
}
@keyframes hxMarketLivePulse{
0%,
100%{
opacity:.55;
transform:scale(.82);
}
50%{
opacity:1;
transform:scale(1);
}
}
/* ==========================================================
06 — MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:7px !important;
box-sizing:border-box !important;
overflow:visible !important;
background:transparent !important;
}
/* ==========================================================
07 — MASTER GRID
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
grid-template-rows:auto;
column-gap:0 !important;
row-gap:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0 !important;
width:auto !important;
max-width:none !important;
min-height:56px;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
color:#D9E7F2;
border-right:
1px solid rgba(255,255,255,.055);
border-bottom:
1px solid rgba(255,255,255,.045);
transition:
background .18s ease,
border-color .18s ease;
}
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:0;
}
/* ==========================================================
09 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-row.hx-market-header{
min-height:46px;
align-items:stretch;
border:
1px solid rgba(0,168,255,.13);
border-radius:8px;
overflow:visible !important;
background:
linear-gradient(
180deg,
#163B5D 0%,
#102E4A 100%
) !important;
}
/* ==========================================================
10 — HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
min-height:46px;
padding:0 7px;
display:flex;
align-items:center;
justify-content:center;
color:#F4F9FD;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
border-right:
1px solid rgba(255,255,255,.065);
border-bottom:0;
}
/* ==========================================================
11 — FIAT HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(1){
grid-column:1;
justify-content:flex-start;
padding-left:12px;
color:#91AFC7;
}
/* ==========================================================
12 — BTC
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(2){
grid-column:2;
}
/* ==========================================================
13 — XMR
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(3){
grid-column:3;
}
/* ==========================================================
14 — SLOT A
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(4){
grid-column:4;
}
/* ==========================================================
15 — SLOT B
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(5){
grid-column:5;
}
/* ==========================================================
16 — SLOT C
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(6){
grid-column:6;
}
/* ==========================================================
17 — SELECTED
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell:nth-child(7){
grid-column:7;
border-right:0;
overflow:visible !important;
z-index:100;
}
/* ==========================================================
18 — COIN HEAD
========================================================== */
.hx-market-slot-section
.hx-coin-head{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
/* ==========================================================
19 — ROTATING COIN
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]{
position:relative;
color:#BDE8FF;
}
/* ROTATING DOT */
.hx-market-slot-section
.hx-market-header
.hx-market-cell[data-rotating="true"]::after{
content:"";
position:absolute;
top:7px;
right:7px;
width:4px;
height:4px;
border-radius:50%;
background:#00A8FF;
box-shadow:
0 0 8px
rgba(0,168,255,.8);
}
/* ==========================================================
20 — SELECTED COIN CELL
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible !important;
z-index:200;
}
/* ==========================================================
21 — SELECTED COIN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
box-sizing:border-box;
border:
1px solid rgba(0,168,255,.50);
border-radius:7px;
background:
linear-gradient(
180deg,
#1A4A73,
#123657
) !important;
color:#FFFFFF;
font-size:9px;
font-weight:900;
letter-spacing:.35px;
cursor:pointer;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.06),
0 4px 10px
rgba(0,0,0,.20);
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .15s ease;
}
.hx-market-slot-section
.hx-market-select:hover{
background:
linear-gradient(
180deg,
#236092,
#17466B
) !important;
border-color:#00A8FF;
box-shadow:
0 0 15px
rgba(0,168,255,.18);
}
.hx-market-slot-section
.hx-market-select:active{
transform:scale(.97);
}
/* ==========================================================
22 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#A8D9F5;
font-size:7px;
transition:
transform .18s ease;
}
/* OPEN */
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]{
border-color:#00A8FF;
box-shadow:
0 0 16px
rgba(0,168,255,.22);
}
.hx-market-slot-section
.hx-market-select[aria-expanded="true"]
.hx-arrow{
transform:rotate(180deg);
}
/* ==========================================================
23 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 7px);
right:7px;
width:150px;
max-height:260px;
padding:6px;
box-sizing:border-box;
overflow-y:auto;
border:
1px solid rgba(0,168,255,.40);
border-radius:10px;
background:
linear-gradient(
145deg,
#153B5D,
#091B2D
) !important;
box-shadow:
0 18px 40px
rgba(0,0,0,.55),
0 0 20px
rgba(0,168,255,.08);
z-index:99999;
}
/* ==========================================================
24 — DROPDOWN BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown
button{
width:100%;
min-height:33px;
margin:2px 0;
padding:0 10px;
display:flex;
align-items:center;
justify-content:flex-start;
box-sizing:border-box;
border:0;
border-radius:6px;
background:transparent !important;
color:#C9D9E6;
font-size:10px;
font-weight:800;
text-align:left;
cursor:pointer;
transition:
background .15s ease,
color .15s ease,
padding-left .15s ease;
}
.hx-market-slot-section
.hx-market-coin-dropdown
button:hover{
padding-left:14px;
color:#FFFFFF;
background:
linear-gradient(
90deg,
rgba(0,168,255,.20),
rgba(0,168,255,.04)
) !important;
}
/* ==========================================================
25 — DATA ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
min-height:58px;
align-items:stretch;
background:
linear-gradient(
90deg,
rgba(8,29,48,.80),
rgba(10,34,56,.60)
) !important;
}
/* ==========================================================
26 — DATA GRID POSITIONS
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(1){
grid-column:1;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(2){
grid-column:2;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(3){
grid-column:3;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(4){
grid-column:4;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(5){
grid-column:5;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(6){
grid-column:6;
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell:nth-child(7){
grid-column:7;
}
/* ==========================================================
27 — FIAT
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-fiat{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 8px 0 12px;
color:#91AFC5;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
background:
rgba(14,43,69,.30);
}
/* ==========================================================
28 — PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
min-width:0;
padding:6px 7px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-sizing:border-box;
background:
rgba(6,22,37,.18);
}
/* ==========================================================
29 — PRICE VALUE
========================================================== */
.hx-market-slot-section
.hx-price-value{
min-width:0;
max-width:calc(100% - 55px);
display:inline-flex;
align-items:center;
justify-content:center;
color:#F5F9FF;
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:
color .18s ease,
transform .18s ease,
text-shadow .18s ease;
}
/* ==========================================================
30 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#35EA7C !important;
text-shadow:
0 0 10px
rgba(37,211,102,.28);
animation:
hxPriceUp
.42s
ease;
}
@keyframes hxPriceUp{
0%{
transform:translateY(3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
31 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF6258 !important;
text-shadow:
0 0 10px
rgba(255,69,58,.28);
animation:
hxPriceDown
.42s
ease;
}
@keyframes hxPriceDown{
0%{
transform:translateY(-3px);
opacity:.5;
}
100%{
transform:translateY(0);
opacity:1;
}
}
/* ==========================================================
32 — ACTION BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px;
min-width:48px;
max-width:48px;
height:29px;
min-height:29px;
padding:0;
flex:0 0 48px;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:7px;
color:#FFFFFF !important;
font-size:8px;
font-weight:900;
line-height:1;
letter-spacing:.2px;
cursor:pointer;
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
/* ==========================================================
33 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366;
box-shadow:
0 4px 11px
rgba(37,211,102,.25);
}
/* ==========================================================
34 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A;
box-shadow:
0 4px 11px
rgba(255,69,58,.24);
}
/* ==========================================================
35 — ACTION HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action:hover{
filter:brightness(1.10);
transform:translateY(-1px);
}
.hx-market-slot-section
.hx-market-action.is-buy:hover{
box-shadow:
0 0 15px
rgba(37,211,102,.42);
}
.hx-market-slot-section
.hx-market-action.is-sell:hover{
box-shadow:
0 0 15px
rgba(255,69,58,.42);
}
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.94);
}
/* ==========================================================
36 — SELECTED COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="selected"]{
background:
linear-gradient(
180deg,
rgba(0,168,255,.045),
rgba(0,168,255,.012)
);
}
/* ==========================================================
37 — ROTATING COLUMNS
========================================================== */
.hx-market-slot-section
.hx-market-cell[data-column="slot-a"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-b"],
.hx-market-slot-section
.hx-market-cell[data-column="slot-c"]{
background:
rgba(9,34,56,.20);
}
/* ==========================================================
38 — ROW HOVER
========================================================== */
@media(min-width:901px){
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-market-cell{
background:
rgba(0,168,255,.025);
}
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
}
/* ==========================================================
39 — ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:0;
}
/* ==========================================================
40 — SCROLLBAR DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-track{
background:rgba(255,255,255,.025);
}
.hx-market-slot-section
.hx-market-coin-dropdown::-webkit-scrollbar-thumb{
background:
rgba(0,168,255,.38);
border-radius:10px;
}
/* ==========================================================
41 — FOCUS
========================================================== */
.hx-market-slot-section
button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
.hx-market-slot-section
button:focus{
outline:none;
}
.hx-market-slot-section
button:focus-visible{
outline:
1px solid rgba(0,168,255,.70);
outline-offset:2px;
}
/* ==========================================================
42 — LAYOUT LOCK
========================================================== */
/*
Market Slot harus mengikuti parent utama.
Tidak boleh memiliki lebar 90%.
*/
.hx-market-slot-section,
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
align-self:stretch !important;
justify-self:stretch !important;
}
/* ==========================================================
43 — DESKTOP ALIGNMENT
========================================================== */
@media(min-width:901px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
70px
repeat(6,minmax(0,1fr)) !important;
}
}
/* ==========================================================
44 — TABLET
========================================================== */
@media(max-width:900px){
.hx-market-slot-section{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-market-row{
grid-template-columns:
60px
repeat(6,minmax(0,1fr)) !important;
}
.hx-market-slot-section
.hx-market-cell{
padding-left:5px;
padding-right:5px;
}
.hx-market-slot-section
.hx-price-value{
font-size:11px;
}
.hx-market-slot-section
.hx-market-action{
width:43px;
min-width:43px;
max-width:43px;
height:27px;
font-size:8px;
}
}
/* ==========================================================
45 — MOBILE
========================================================== */
@media(max-width:650px){
.hx-market-slot-section{
margin-top:10px !important;
}
.hx-market-slot-section
.hx-market-slot{
min-width:760px;
}
.hx-market-slot-section
.hx-widget-header{
min-height:48px;
padding:0 12px;
}
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px;
}
.hx-market-live{
font-size:7px;
}
}
/* ==========================================================
46 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
.hx-market-slot-section *{
animation:none !important;
transition:none !important;
}
}/* ==========================================================
MARKET SLOT — BUY / SELL ALIGNMENT FIX
========================================================== */
/* Semua price cell menggunakan struktur horizontal yang sama */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px !important;
align-items:center !important;
justify-items:center !important;
gap:8px !important;
min-height:56px !important;
padding:6px 8px !important;
box-sizing:border-box !important;
}
/* Harga selalu berada di tengah area harga */
.hx-market-slot-section
.hx-market-cell.hx-price
.hx-price-value{
width:100% !important;
min-width:0 !important;
max-width:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
line-height:1 !important;
}
/* ==========================================================
SEMUA BUY / SELL MEMILIKI UKURAN IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:29px !important;
min-height:29px !important;
max-height:29px !important;
margin:0 !important;
padding:0 !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
justify-self:center !important;
box-sizing:border-box !important;
border-radius:7px !important;
line-height:1 !important;
}
/* ==========================================================
BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#35EA7C,
#18C95B
) !important;
border:1px solid #25D366 !important;
box-shadow:
0 4px 11px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF6258,
#FF3B30
) !important;
border:1px solid #FF453A !important;
box-shadow:
0 4px 11px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
PASTIKAN SEMUA ROW MEMILIKI TINGGI IDENTIK
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell.hx-price{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
}
/* ==========================================================
PRICE VALUE TIDAK BOLEH MENDORONG BUTTON
========================================================== */
.hx-market-slot-section
.hx-price-value{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.hx-market-slot-section
.hx-market-cell.hx-price{
grid-template-columns:minmax(0,1fr) 43px !important;
gap:6px !important;
padding:6px 5px !important;
}
.hx-market-slot-section
.hx-market-action{
width:43px !important;
min-width:43px !important;
max-width:43px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
}
}/* ==========================================================
HEREEXC — MARKET SLOT
PREMIUM LARGE COMPACT EDITION
========================================================== */
/* ==========================================================
01 — OUTER
========================================================== */
.hx-market-slot-section{
width:90%;
margin:16px auto 0;
box-sizing:border-box;
position:relative;
}
/* ==========================================================
02 — MAIN WIDGET
========================================================== */
.hx-market-slot-section
.hx-market-widget{
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
overflow:visible;
border-radius:14px;
background:
linear-gradient(
145deg,
#102640,
#071526
);
border:1px solid
rgba(0,168,255,.32);
box-shadow:
0 10px 28px
rgba(0,0,0,.30);
}
/* ==========================================================
03 — HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
width:100%;
min-height:48px;
padding:0 16px;
display:flex;
align-items:center;
box-sizing:border-box;
border-bottom:
1px solid
rgba(0,168,255,.16);
border-radius:14px 14px 0 0;
background:
linear-gradient(
90deg,
rgba(0,168,255,.08),
transparent 75%
);
}
/* ==========================================================
04 — TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
margin:0;
color:#FFFFFF;
font-size:15px;
font-weight:900;
letter-spacing:.8px;
line-height:1;
}
/* ==========================================================
05 — BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
width:100%;
padding:8px;
box-sizing:border-box;
overflow:visible;
}
/* ==========================================================
06 — ROW
========================================================== */
.hx-market-slot-section
.hx-market-row{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:
72px
repeat(5,minmax(0,1fr));
align-items:stretch;
box-sizing:border-box;
}
/* ==========================================================
07 — HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
min-height:48px;
margin-bottom:3px;
border-radius:9px;
background:
linear-gradient(
90deg,
rgba(20,55,90,.90),
rgba(17,43,73,.72)
);
}
/* ==========================================================
08 — ALL CELLS
========================================================== */
.hx-market-slot-section
.hx-market-cell{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:5px 7px;
box-sizing:border-box;
border-right:
1px solid
rgba(100,150,200,.14);
border-bottom:
1px solid
rgba(100,150,200,.10);
}
/* ==========================================================
09 — LAST COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell:last-child{
border-right:none;
}
/* ==========================================================
10 — FIAT COLUMN
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-fiat{
justify-content:flex-start;
padding-left:12px;
color:#9CB6CF;
font-size:11px;
font-weight:900;
letter-spacing:.45px;
}
/* ==========================================================
11 — COIN HEADERS
========================================================== */
.hx-market-slot-section
.hx-coin-head{
color:#FFFFFF;
font-size:11px;
font-weight:900;
letter-spacing:.35px;
}
/* ==========================================================
12 — PRICE CELL
PRICE
↓
ACTION
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:58px;
padding:6px 5px;
}
/* ==========================================================
13 — PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
display:block;
width:100%;
color:#F4F8FF;
font-size:13px !important;
font-weight:900 !important;
line-height:1.05;
text-align:center;
letter-spacing:.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ==========================================================
14 — PRICE UP
========================================================== */
.hx-market-slot-section
.hx-price-value.price-up{
color:#25D366 !important;
}
/* ==========================================================
15 — PRICE DOWN
========================================================== */
.hx-market-slot-section
.hx-price-value.price-down{
color:#FF5C5C !important;
}
/* ==========================================================
16 — BUY / SELL BASE
========================================================== */
.hx-market-slot-section
.hx-market-action{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:27px !important;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:6px;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.15px;
line-height:1;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .18s ease,
filter .18s ease;
}
/* ==========================================================
17 — BUY
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:#25D366 !important;
border:1px solid #25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.25) !important;
}
/* ==========================================================
18 — SELL
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:#FF453A !important;
border:1px solid #FF453A !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,69,58,.24) !important;
}
/* ==========================================================
19 — BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
background:#20C45E !important;
border-color:#20C45E !important;
box-shadow:
0 4px 12px
rgba(37,211,102,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
20 — SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
background:#E93830 !important;
border-color:#E93830 !important;
box-shadow:
0 4px 12px
rgba(255,69,58,.38) !important;
transform:translateY(-1px);
}
/* ==========================================================
21 — ACTIVE
========================================================== */
.hx-market-slot-section
.hx-market-action:active{
transform:scale(.95);
}
/* ==========================================================
22 — SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-coin-dropdown-cell{
position:relative;
overflow:visible;
}
/* ==========================================================
23 — LTC SELECTOR
========================================================== */
.hx-market-slot-section
.hx-market-select{
width:100%;
max-width:105px;
min-height:32px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
border-radius:7px;
border:
1px solid
rgba(0,168,255,.40);
background:
#102D4B;
color:#FFFFFF;
font-size:10px;
font-weight:900;
cursor:pointer;
}
/* ==========================================================
24 — SELECT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
background:#163A5D;
border-color:
rgba(0,168,255,.70);
}
/* ==========================================================
25 — ARROW
========================================================== */
.hx-market-slot-section
.hx-arrow{
color:#8FB2D0;
font-size:8px;
}
/* ==========================================================
26 — DROPDOWN
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown{
position:absolute;
top:calc(100% + 5px);
right:5px;
z-index:99999;
width:115px;
max-height:250px;
overflow-y:auto;
padding:5px;
box-sizing:border-box;
border-radius:9px;
background:
linear-gradient(
145deg,
#142E4B,
#081625
);
border:
1px solid
rgba(0,168,255,.32);
box-shadow:
0 15px 30px
rgba(0,0,0,.48);
}
/* ==========================================================
27 — DROPDOWN ITEMS
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button{
width:100%;
min-height:30px;
padding:0 9px;
display:flex;
align-items:center;
justify-content:flex-start;
border:0;
border-radius:6px;
background:transparent;
color:#DCEAF7;
font-size:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
28 — DROPDOWN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-coin-dropdown button:hover{
background:
rgba(0,168,255,.14);
color:#FFFFFF;
}
/* ==========================================================
29 — SIGNAL PULSE
========================================================== */
.hx-market-slot-section
.hx-market-action.signal-pulse{
animation:
hxMarketSignal
.45s
ease;
}
@keyframes hxMarketSignal{
0%{
transform:scale(1);
}
45%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
/* ==========================================================
30 — TOUCH
========================================================== */
.hx-market-slot-section
.hx-market-widget button{
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
/* ==========================================================
31 — TABLET
========================================================== */
@media(max-width:999px){
.hx-market-slot-section{
width:100%;
}
}
/* ==========================================================
32 — MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section{
width:100%;
}
.hx-market-slot-section
.hx-market-slot-body{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.hx-market-slot-section
.hx-market-row{
min-width:650px;
grid-template-columns:
62px
repeat(5,118px);
}
.hx-market-slot-section
.hx-price-value{
font-size:11px !important;
}
.hx-market-slot-section
.hx-market-action{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:25px !important;
font-size:8px !important;
}
}/* ==========================================================
HEREEXC MARKET SLOT
PREMIUM EXCHANGE TERMINAL V2
========================================================== */
/* ==========================================================
MARKET TERMINAL
========================================================== */
.hx-market-slot-section
.hx-market-widget{
position:relative;
background:
linear-gradient(
145deg,
#102844 0%,
#0B1C31 48%,
#071526 100%
);
border:1px solid
rgba(0,168,255,.34);
box-shadow:
0 12px 32px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
TOP LIGHT
========================================================== */
.hx-market-slot-section
.hx-market-widget::before{
content:"";
position:absolute;
top:0;
left:10%;
right:10%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,168,255,.65),
transparent
);
opacity:.7;
pointer-events:none;
}
/* ==========================================================
HEADER
========================================================== */
.hx-market-slot-section
.hx-widget-header{
position:relative;
min-height:50px;
background:
linear-gradient(
90deg,
rgba(0,168,255,.09),
rgba(20,50,82,.25),
rgba(0,168,255,.03)
);
}
/* ==========================================================
TITLE
========================================================== */
.hx-market-slot-section
.hx-widget-header h2{
font-size:16px !important;
letter-spacing:1px;
text-shadow:
0 0 12px rgba(255,255,255,.10);
}
/* ==========================================================
LIVE MARKET INDICATOR
Tambahkan melalui pseudo-element
========================================================== */
.hx-market-slot-section
.hx-widget-header::after{
content:"● LIVE MARKET";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#25D366;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
text-shadow:
0 0 8px rgba(37,211,102,.45);
}
/* ==========================================================
MARKET BODY
========================================================== */
.hx-market-slot-section
.hx-market-slot-body{
background:
linear-gradient(
180deg,
rgba(8,25,43,.15),
rgba(4,15,28,.25)
);
}
/* ==========================================================
HEADER ROW
========================================================== */
.hx-market-slot-section
.hx-market-header{
background:
linear-gradient(
90deg,
rgba(20,54,89,.92),
rgba(15,43,72,.82)
);
border:
1px solid
rgba(71,137,190,.10);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
/* ==========================================================
HEADER CELLS
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-market-cell{
border-right:
1px solid
rgba(100,160,210,.12);
color:#A9C0D7;
}
/* ==========================================================
COIN HEADER
========================================================== */
.hx-market-slot-section
.hx-market-header
.hx-coin-head{
color:#F4F8FF;
font-size:11px !important;
font-weight:900;
}
/* ==========================================================
BODY ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header){
transition:
background .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
ROW HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover{
background:
rgba(0,168,255,.055);
box-shadow:
inset 2px 0 0
rgba(0,168,255,.40);
}
/* ==========================================================
FIAT HOVER
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header):hover
.hx-fiat{
color:#FFFFFF;
}
/* ==========================================================
PRICE
========================================================== */
.hx-market-slot-section
.hx-price-value{
color:#F6FAFF !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.15px;
text-shadow:
0 1px 4px rgba(0,0,0,.35);
}
/* ==========================================================
PRICE CELL
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price{
transition:
background .18s ease;
}
/* ==========================================================
PRICE CELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-cell.hx-price:hover{
background:
rgba(0,168,255,.035);
}
/* ==========================================================
BUY BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy{
background:
linear-gradient(
180deg,
#2BE873,
#20C45E
) !important;
border:
1px solid
#25D366 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(37,211,102,.22) !important;
}
/* ==========================================================
SELL BUTTON
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell{
background:
linear-gradient(
180deg,
#FF5A4F,
#F04438
) !important;
border:
1px solid
#FF4B40 !important;
color:#FFFFFF !important;
box-shadow:
0 3px 9px
rgba(255,70,60,.22) !important;
}
/* ==========================================================
BUY HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-buy:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(37,211,102,.40) !important;
}
/* ==========================================================
SELL HOVER
========================================================== */
.hx-market-slot-section
.hx-market-action.is-sell:hover{
filter:brightness(1.08);
box-shadow:
0 4px 14px
rgba(255,70,60,.38) !important;
}
/* ==========================================================
HEREEXC BUY — ACTION PLACEMENT
BUY NOW DI SAMPING PAYMENT SERVICES
========================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
grid-template-rows:
auto !important;
gap:10px !important;
align-items:stretch !important;
}
/* ==========================================================
SELECTED COIN
========================================================== */
.hx-market-slot-section
.hx-market-select{
background:
linear-gradient(
180deg,
#163B61,
#102D4B
) !important;
border:
1px solid
rgba(0,168,255,.48) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.04),
0 3px 8px
rgba(0,0,0,.20);
}
/* ==========================================================
SELECTED COIN HOVER
========================================================== */
.hx-market-slot-section
.hx-market-select:hover{
border-color:
#00A8FF !important;
box-shadow:
0 0 12px
rgba(0,168,255,.18);
}
/* ==========================================================
VERTICAL COLUMN DIVIDERS
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell{
border-right:
1px solid
rgba(88,145,190,.12);
}
/* ==========================================================
FIAT DIVIDER — STRONGER
========================================================== */
.hx-market-slot-section
.hx-market-row
.hx-market-cell.hx-fiat{
border-right:
1px solid
rgba(0,168,255,.22);
}
/* ==========================================================
ROW SEPARATOR
========================================================== */
.hx-market-slot-section
.hx-market-row:not(.hx-market-header)
.hx-market-cell{
border-bottom:
1px solid
rgba(88,145,190,.095);
}
/* ==========================================================
LAST ROW
========================================================== */
.hx-market-slot-section
.hx-market-row:last-child
.hx-market-cell{
border-bottom:none;
}
/* ==========================================================
SOFT MARKET GLOW
========================================================== */
.hx-market-slot-section
.hx-market-widget{
isolation:isolate;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
.hx-market-slot-section
.hx-widget-header h2{
font-size:14px !important;
}
.hx-market-slot-section
.hx-widget-header::after{
right:10px;
font-size:7px;
}
}/* ==========================================================
HEREEXC WALLET DROPDOWN
FINAL COMPACT — CSS ONLY
========================================================== */
.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:none !important;
padding:5px !important;
box-sizing:border-box !important;
border-radius:9px !important;
background:
linear-gradient(
145deg,
#163B5D 0%,
#102B48 52%,
#081526 100%
) !important;
border:1px solid
rgba(37,211,102,.32) !important;
box-shadow:
0 16px 32px rgba(0,0,0,.60),
0 0 18px rgba(37,211,102,.08) !important;
}
/* ==========================================================
WALLET MENU ITEMS
========================================================== */
.hx-wallet-dropdown > button{
width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 9px !important;
margin:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-radius:6px !important;
color:#EAF3F7 !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
HOVER
========================================================== */
.hx-wallet-dropdown > button:hover{
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
}
/* ==========================================================
DIVIDER
========================================================== */
.hx-wallet-dropdown .hx-wallet-divider{
width:100% !important;
height:1px !important;
margin:2px 0 !important;
background:
rgba(37,211,102,.14) !important;
}.hx-wallet-dropdown{
width:145px !important;
min-width:145px !important;
max-width:145px !important;
transform:translateX(18px) !important;
padding:5px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC — DGB RECEIVE POPUP
FIX POSITION — CSS ONLY
========================================================== */
.hx-dgb-receive-box{
position:fixed !important;
top:50% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
width:340px !important;
max-width:calc(100vw - 30px) !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
z-index:2147483000 !important;
box-sizing:border-box !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:14px !important;
box-shadow:
0 25px 70px rgba(0,0,0,.70),
0 0 30px rgba(37,211,102,.10) !important;
}/* ==========================================================
HEREEXC V1.15.3
CREATE WALLET — COMPACT PREMIUM
----------------------------------------------------------
CSS ONLY
NO JS CHANGE
========================================================== */
/* ==========================================================
CREATE WALLET CONTAINER
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:calc(100% + 10px) !important;
right:0 !important;
left:auto !important;
width:360px !important;
max-width:360px !important;
max-height:470px !important;
margin:0 !important;
padding:16px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.32) !important;
border-radius:14px !important;
box-shadow:
0 22px 55px rgba(0,0,0,.62),
0 0 30px rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:2147483000 !important;
}
/* ==========================================================
TITLE
========================================================== */
#hxWalletCreateInline
.hx-v114-title{
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px 0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
#hxWalletCreateInline
.hx-v114-subtitle{
font-size:9px !important;
line-height:1.35 !important;
margin:0 0 12px 0 !important;
color:#8EA6BD !important;
}
/* ==========================================================
LABEL
========================================================== */
#hxWalletCreateInline
.hx-v114-label{
font-size:9px !important;
line-height:1.2 !important;
margin:0 0 6px 0 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
RECOVERY WORDS
4 × 3
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:5px !important;
margin:0 0 10px 0 !important;
}
/* ==========================================================
WORD BOX
========================================================== */
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
min-height:32px !important;
height:32px !important;
padding:0 6px !important;
border-radius:7px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
background:
rgba(3,14,26,.82) !important;
border:
1px solid
rgba(0,168,255,.16) !important;
}
#hxWalletCreateInline
.hx-v114-number{
font-size:8px !important;
margin-right:4px !important;
color:#607B92 !important;
}
/* ==========================================================
WARNING
========================================================== */
#hxWalletCreateInline
.hx-v114-warning{
margin:8px 0 10px 0 !important;
padding:8px 9px !important;
border-radius:7px !important;
font-size:8px !important;
line-height:1.35 !important;
}
/* ==========================================================
PASSWORD FIELD
========================================================== */
#hxWalletCreateInline
.hx-v114-field{
margin-top:8px !important;
}
#hxWalletCreateInline
input{
width:100% !important;
height:36px !important;
min-height:36px !important;
padding:0 10px !important;
font-size:10px !important;
border-radius:7px !important;
}
/* ==========================================================
CREATE BUTTON
========================================================== */
#hxWalletCreateInline
.hx-v114-create{
min-height:38px !important;
height:38px !important;
margin-top:10px !important;
border-radius:7px !important;
font-size:10px !important;
}
/* ==========================================================
CANCEL
========================================================== */
#hxWalletCreateInline
.hx-v114-cancel{
min-height:27px !important;
height:27px !important;
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
STATUS
========================================================== */
#hxWalletCreateInline
.hx-v114-status{
min-height:12px !important;
margin-top:4px !important;
font-size:8px !important;
}
/* ==========================================================
WALLET MENU MUST REMAIN ABOVE MARKET
========================================================== */
.hx-wallet-menu{
position:relative !important;
z-index:2147482000 !important;
}
/* ==========================================================
WALLET DROPDOWN
========================================================== */
.hx-wallet-menu
.hx-wallet-dropdown{
z-index:2147482500 !important;
}
/* ==========================================================
CREATE CARD PARENT
Prevent clipping by wallet row
========================================================== */
.hx-wallet-row{
position:relative !important;
z-index:2147481000 !important;
overflow:visible !important;
}
/* ==========================================================
BUY PANEL
========================================================== */
#buy,
.hx-buy-panel{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
right:0 !important;
width:320px !important;
max-width:
calc(100vw - 24px) !important;
max-height:
calc(100vh - 110px) !important;
padding:13px !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC — HIDE CREATE WALLET SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-track{
display:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar-thumb{
display:none !important;
}/* ==========================================================
HEREEXC V1.15.8
CREATE WALLET — CENTER PANEL LOCK
----------------------------------------------------------
CSS ONLY
- Tetap di panel tengah
- Tidak lari ke sudut saat browser zoom
- Tidak memakai position:fixed
- Tidak mengubah JS
========================================================== */
/* ==========================================================
CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
WALLET ROW
Menjadi anchor popup
========================================================== */
#buy .hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:1000 !important;
}
/* ==========================================================
WALLET MENU
========================================================== */
#buy .hx-wallet-menu{
position:relative !important;
overflow:visible !important;
z-index:1100 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP TERKUNCI DI TENGAH WALLET ROW
========================================================== */
#buy #hxWalletCreateInline{
position:absolute !important;
/*
* TENGAH PANEL / WALLET ROW
*/
left:50% !important;
right:auto !important;
/*
* BERADA DI ATAS WALLET ROW
*/
bottom:calc(100% + 8px) !important;
top:auto !important;
/*
* KUNCI TENGAH
*/
transform:translateX(-50%) !important;
/* ======================================================
SIZE
====================================================== */
width:300px !important;
max-width:
calc(100% - 16px) !important;
max-height:430px !important;
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/* ======================================================
VISIBILITY
====================================================== */
display:block !important;
visibility:visible !important;
opacity:1 !important;
/* ======================================================
OVERLAY
====================================================== */
z-index:2147483647 !important;
/* ======================================================
PREMIUM NAVY
====================================================== */
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* ==========================================================
RECOVERY WORD BOX SAJA DIPERKECIL
TEXT TETAP
========================================================== */
#buy #hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#buy #hxWalletCreateInline
.hx-v114-word{
height:28px !important;
min-height:28px !important;
padding:
0 5px !important;
font-size:8px !important;
border-radius:6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#buy #hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#buy #hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
PARENT LAIN TIDAK BOLEH MEMOTONG POPUP
========================================================== */
#buy .hx-wallet-row,
#buy .hx-wallet-menu,
#buy .hx-wallet-menu > *,
#buy .hx-action-area,
#buy .hx-payment-area{
overflow:visible !important;
}
/* ==========================================================
ZOOM / LAYAR SEMPIT
------------------------------------------
Card tetap berada di tengah panel,
bukan pindah ke sudut browser.
========================================================== */
@media(max-width:900px){
#buy #hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#buy #hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 24px) !important;
bottom:
calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.9
CREATE WALLET — CENTER PANEL ANCHOR
----------------------------------------------------------
CSS ONLY
Popup mengikuti WALLET ROW / PANEL TENGAH
Tidak mengikuti viewport browser
========================================================== */
/* ==========================================================
1. WALLET ROW = ANCHOR UTAMA
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/*
* Jika Create Wallet merupakan child dari wallet-row,
* paksa row tetap menjadi containing block.
*/
.hx-wallet-row:has(#hxWalletCreateInline){
position:relative !important;
overflow:visible !important;
z-index:2147483000 !important;
}
/* ==========================================================
2. CENTER PANEL
========================================================== */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
z-index:100 !important;
}
/* ==========================================================
3. CREATE WALLET
----------------------------------------------------------
CENTER TERHADAP WALLET ROW
BUKAN TERHADAP LAYAR
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
/*
* CENTER PANEL
*/
left:50% !important;
right:auto !important;
/*
* DI ATAS WALLET ROW
*/
top:auto !important;
bottom:calc(100% + 8px) !important;
/*
* LOCK CENTER
*/
transform:
translateX(-50%) !important;
/*
* UKURAN
*/
width:300px !important;
max-width:300px !important;
max-height:430px !important;
/*
* BOX
*/
margin:0 !important;
padding:13px !important;
box-sizing:border-box !important;
/*
* PREMIUM NAVY
*/
background:
linear-gradient(
145deg,
#142F4B 0%,
#0D2239 55%,
#081526 100%
) !important;
border:
1px solid
rgba(37,211,102,.35) !important;
border-radius:12px !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.68),
0 0 28px
rgba(37,211,102,.08),
inset 0 1px 0
rgba(255,255,255,.04) !important;
/*
* SELALU DI ATAS MARKET SLOT
*/
z-index:2147483647 !important;
/*
* SCROLL INTERNAL
*/
overflow-y:auto !important;
overflow-x:hidden !important;
/*
* PASTIKAN TERLIHAT
*/
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==========================================================
4. HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* ==========================================================
5. RECOVERY WORD BOX
HANYA KOTAK DIPERKECIL
TEKS TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
height:28px !important;
min-height:28px !important;
padding:0 5px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* ==========================================================
6. JANGAN BIARKAN PARENT MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-row > *,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
7. Z-INDEX
========================================================== */
.hx-wallet-row{
z-index:2147483000 !important;
}
#hxWalletCreateInline{
z-index:2147483647 !important;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:900px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 16px) !important;
left:50% !important;
right:auto !important;
transform:
translateX(-50%) !important;
}
}
@media(max-width:600px){
#hxWalletCreateInline{
width:280px !important;
max-width:
calc(100vw - 20px) !important;
bottom:calc(100% + 6px) !important;
left:50% !important;
transform:
translateX(-50%) !important;
}
}/* ==========================================================
HEREEXC V1.15.10
CREATE WALLET — SAFE CENTER PANEL
----------------------------------------------------------
CSS ONLY
Mengikuti struktur asli V1.14
========================================================== */
/* ==========================================================
WALLET ROW
========================================================== */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
z-index:999999 !important;
}
/* ==========================================================
CREATE WALLET
------------------------------------------
TETAP DI DALAM PANEL TENGAH
TIDAK FIXED
TIDAK ABSOLUTE
TIDAK LARI KE VIEWPORT
========================================================== */
#hxWalletCreateInline{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:310px !important;
max-width:310px !important;
margin:10px auto 0 auto !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.58),
inset 0 1px 0
rgba(255,255,255,.04) !important;
z-index:999999 !important;
overflow:hidden !important;
}
/* ==========================================================
12 RECOVERY WORDS
HANYA KOTAK DIPERKECIL
HURUF TETAP
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
width:100% !important;
min-height:30px !important;
height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
border-radius:6px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:10px !important;
}
/* ==========================================================
INPUT
========================================================== */
#hxWalletCreateInline input{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
PARENT TIDAK MEMOTONG CARD
========================================================== */
.hx-wallet-row,
.hx-wallet-menu,
.hx-wallet-menu > *{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100% - 20px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
#hxWalletCreateInline
.hx-v114-words{
grid-template-columns:
repeat(3,1fr) !important;
}
}/* ==========================================================
HEREEXC V1.15.11
CREATE WALLET — CENTER PANEL OVERLAY
----------------------------------------------------------
- TIDAK MENDORONG PANEL KE BAWAH
- TIDAK KELUAR KE SUDUT LAYAR
- TETAP DI DALAM PANEL TENGAH
- TIDAK MENGUBAH JS
========================================================== */
/* ==========================================================
CENTER EXCHANGE PANEL
========================================================== */
.hx-center-panel{
position:relative !important;
overflow:visible !important;
}
/* ==========================================================
CREATE WALLET OVERLAY
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:
translateX(-50%) !important;
width:310px !important;
max-width:310px !important;
margin:8px 0 0 0 !important;
padding:13px !important;
box-sizing:border-box !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:999999 !important;
background:
linear-gradient(
145deg,
#142F4B,
#0D2239 55%,
#081526
) !important;
border:
1px solid
rgba(37,211,102,.30) !important;
border-radius:12px !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.65) !important;
overflow:hidden !important;
}
/* ==========================================================
12 WORDS
========================================================== */
#hxWalletCreateInline
.hx-v114-words{
display:grid !important;
grid-template-columns:
repeat(4,1fr) !important;
gap:4px !important;
margin-bottom:10px !important;
}
#hxWalletCreateInline
.hx-v114-word{
min-width:0 !important;
height:30px !important;
min-height:30px !important;
padding:0 6px !important;
box-sizing:border-box !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
border-radius:6px !important;
font-size:10px !important;
}
/* ==========================================================
HILANGKAN SCROLLBAR
========================================================== */
#hxWalletCreateInline{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
#hxWalletCreateInline::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* ==========================================================
JANGAN BIARKAN PARENT MEMOTONG OVERLAY
========================================================== */
.hx-center-panel,
.hx-center-panel > *,
.hx-wallet-menu,
.hx-wallet-dropdown{
overflow:visible !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:600px){
#hxWalletCreateInline{
width:290px !important;
max-width:
calc(100vw - 30px) !important;
}
}/* ==========================================================
HEREEXC — CREATE WALLET ZOOM STABILITY
Jangan ubah ukuran / JS
========================================================== */
#hxWalletCreateInline{
position:absolute !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
/*
* Posisi vertikal tetap relatif terhadap
* containing block yang sama
*/
top:calc(100% + 10px) !important;
bottom:auto !important;
/*
* Jangan menggunakan vw / vh untuk posisi
*/
margin:0 !important;
z-index:999999 !important;
}
/* PANEL TENGAH MENJADI ANCHOR */
#buy,
.hx-center-panel,
.hx-buy-panel{
position:relative !important;
overflow:visible !important;
}
/* WALLET ROW */
.hx-wallet-row{
position:relative !important;
overflow:visible !important;
}/* ==========================================================
HEREEXC TRANSACTION PANEL
CSS V1 — STATE CONTROL
----------------------------------------------------------
MARKET = DEFAULT
WITHDRAW = SEND
DEPOSIT = RECEIVE
HISTORY = AFTER SUBMIT
IMPORTANT:
- ONE PANEL
- ONE ACTIVE VIEW
- NO POPUP
- NO CARD ANIMATION YET
========================================================== */
/* ==========================================================
TRANSACTION PANEL
========================================================== */
#hxTransactionPanel{
position:relative;
width:100%;
overflow:hidden;
}
/* ==========================================================
ALL TRANSACTION VIEWS
========================================================== */
#hxTransactionPanel
.hx-transaction-view{
display:none;
width:100%;
box-sizing:border-box;
}
/* ==========================================================
ACTIVE VIEW
========================================================== */
#hxTransactionPanel
.hx-transaction-view.is-active{
display:block;
}
/* ==========================================================
WIDGET HEADER
========================================================== */
#hxTransactionPanel
.hx-widget-header{
display:flex;
align-items:center;
gap:10px;
}
/* ==========================================================
BACK BUTTON
========================================================== */
#hxTransactionPanel
.hx-transaction-back{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel
.hx-market-chart{
width:100%;
}
#hxTransactionPanel
.hx-market-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
#hxTransactionPanel
.hx-market-chart-header strong{
font-size:15px;
}
#hxTransactionPanel
.hx-market-chart-header span{
font-size:11px;
opacity:.65;
}
/* ==========================================================
CANDLE AREA
========================================================== */
#hxTransactionPanel
.hx-candle-area{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
}
/* ==========================================================
TEMPORARY PLACEHOLDER
========================================================== */
#hxTransactionPanel
.hx-chart-placeholder{
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
opacity:.35;
letter-spacing:1px;
}
/* ==========================================================
FUND DESCRIPTION
========================================================== */
#hxTransactionPanel
.hx-fund-description{
margin-bottom:14px;
font-size:12px;
line-height:1.5;
opacity:.7;
}
/* ==========================================================
FUND LABEL
========================================================== */
#hxTransactionPanel
label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:12px;
font-weight:600;
}
/* ==========================================================
FUND INPUT
========================================================== */
#hxTransactionPanel
.hx-widget-body input{
width:100%;
min-height:42px;
box-sizing:border-box;
border-radius:8px;
}
/* ==========================================================
BALANCE
========================================================== */
#hxTransactionPanel
.hx-fund-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
font-size:12px;
}
/* ==========================================================
AMOUNT ROW
========================================================== */
#hxTransactionPanel
.hx-amount-row{
display:flex;
align-items:stretch;
gap:8px;
}
#hxTransactionPanel
.hx-amount-row input{
flex:1;
min-width:0;
}
/* ==========================================================
WITHDRAW ALL
========================================================== */
#hxTransactionPanel
#hxWithdrawAll{
flex:0 0 auto;
min-width:110px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:transparent;
color:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
/* ==========================================================
ABOUT FEE
========================================================== */
#hxTransactionPanel
.hx-about-fee{
margin-top:8px;
padding:0;
border:0;
background:transparent;
color:inherit;
font-size:11px;
opacity:.65;
cursor:pointer;
}
/* ==========================================================
WILL RECEIVE
========================================================== */
#hxTransactionPanel
.hx-will-receive{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
}
/* ==========================================================
AUTHENTICATOR NOTE
========================================================== */
#hxTransactionPanel
.hx-auth-note{
margin-top:6px;
font-size:10px;
line-height:1.4;
opacity:.55;
}
/* ==========================================================
SUBMIT
========================================================== */
#hxTransactionPanel
.hx-withdraw-submit{
width:100%;
min-height:44px;
margin-top:18px;
border:0;
border-radius:9px;
font-weight:800;
cursor:pointer;
}
/* ==========================================================
DEPOSIT
========================================================== */
#hxTransactionPanel
.hx-deposit-coin{
margin-bottom:14px;
font-size:14px;
font-weight:700;
}
#hxTransactionPanel
.hx-deposit-qr{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:10px 0 18px;
}
#hxTransactionPanel
.hx-deposit-qr img{
display:block;
width:170px;
height:170px;
max-width:100%;
object-fit:contain;
}
#hxTransactionPanel
.hx-deposit-label{
margin-bottom:6px;
font-size:11px;
font-weight:600;
}
#hxTransactionPanel
.hx-deposit-address{
width:100%;
box-sizing:border-box;
padding:11px;
border-radius:8px;
word-break:break-all;
font-size:11px;
line-height:1.5;
}
#hxTransactionPanel
.hx-deposit-copy{
width:100%;
min-height:40px;
margin-top:10px;
border-radius:8px;
cursor:pointer;
}
#hxTransactionPanel
.hx-deposit-status{
min-height:18px;
margin-top:8px;
font-size:11px;
}
#hxTransactionPanel
.hx-deposit-note{
margin-top:12px;
font-size:10px;
line-height:1.5;
opacity:.55;
}
/* ==========================================================
HISTORY
========================================================== */
#hxTransactionPanel
.hx-history-result{
width:100%;
}
#hxTransactionPanel
.hx-history-empty{
padding:20px;
text-align:center;
font-size:12px;
opacity:.65;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:700px){
#hxTransactionPanel
.hx-candle-area,
#hxTransactionPanel
.hx-chart-placeholder{
min-height:320px;
}
#hxTransactionPanel
.hx-amount-row{
flex-direction:column;
}
#hxTransactionPanel
#hxWithdrawAll{
width:100%;
min-height:40px;
}
}/* ==========================================================
HEREEXC HISTORY DROPDOWN
FINAL POSITION FIX V1
----------------------------------------------------------
HISTORY:
- FLOATS OVER MARKET CHART
- DOES NOT PUSH LAYOUT
- DOES NOT CHANGE PANEL HEIGHT
- STAYS INSIDE TRANSACTION PANEL
========================================================== */
/* ==========================================================
TRANSACTION PANEL MUST BE ANCHOR
========================================================== */
#hxTransactionPanel{
position:relative !important;
}
/* ==========================================================
HISTORY DROPDOWN
========================================================== */
#hxTransactionHistoryDropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:1px solid rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55) !important;
}
/* ==========================================================
OPEN
========================================================== */
#hxTransactionHistoryDropdown.is-open{
display:block !important;
}
/* ==========================================================
HISTORY HEADER
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
/* ==========================================================
HISTORY TITLE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-dropdown-header strong{
font-size:13px;
font-weight:800;
letter-spacing:.3px;
}
/* ==========================================================
CLOSE BUTTON
Override global button style
========================================================== */
#hxTransactionHistoryDropdown
#hxCloseHistory{
width:28px !important;
min-width:28px !important;
max-width:28px !important;
height:28px !important;
min-height:28px !important;
max-height:28px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 28px !important;
border:0 !important;
border-radius:6px !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ==========================================================
HISTORY BODY
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* ==========================================================
HISTORY ITEM
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-item{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:8px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
/* ==========================================================
TOP
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==========================================================
STATUS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-status{
font-size:10px;
font-weight:700;
color:#25D366;
}
/* ==========================================================
TYPE
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-type{
margin-top:4px;
font-size:10px;
opacity:.55;
}
/* ==========================================================
ROW
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:
1px solid rgba(255,255,255,.06);
font-size:11px;
}
/* ==========================================================
ADDRESS
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-address{
margin-top:10px;
font-size:10px;
}
#hxTransactionHistoryDropdown
.hx-history-address > span{
display:block;
margin-bottom:4px;
opacity:.5;
}
#hxTransactionHistoryDropdown
#hxHistoryAddress{
word-break:break-all;
line-height:1.45;
}
/* ==========================================================
TIME
========================================================== */
#hxTransactionHistoryDropdown
.hx-history-time{
margin-top:10px;
font-size:9px;
opacity:.4;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxTransactionHistoryDropdown::-webkit-scrollbar{
width:4px;
}
#hxTransactionHistoryDropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(255,255,255,.18);
}/* ==========================================================
WALLET HISTORY BUTTON
MATCH WALLET CONTROL ROW
========================================================== */
#hxWalletHistoryButton{
width:auto !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:9px !important;
border:1px solid rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
/* ACTIVE / OPEN */
#hxWalletHistoryButton.is-active{
border-color:#00A8FF !important;
background:#102D47 !important;
}
/* HOVER */
#hxWalletHistoryButton:hover{
background:#123451 !important;
}
/* ==========================================================
HEREEXC FINAL LAYOUT BLUEPRINT
V2 — BASED ON LEGACY PRECISE LAYOUT
----------------------------------------------------------
SAFE OVERRIDE LAYER
- Keeps existing JS / HTML untouched
- Restores precise 3-column proportions
- Gives RIGHT column more room for Market Chart
- Aligns panel bottoms
- Moves Market Slot / Ticker / Footer upward
- Removes artificial right-panel extension
- Forces BUY amount input to NAVY
========================================================== */
/* ==========================================================
01. GLOBAL DESKTOP WIDTH
========================================================== */
:root{
--hx-final-max:1600px;
--hx-final-gap:16px;
}
.hx-header,
.hx-main,
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
box-sizing:border-box !important;
}
/* ==========================================================
02. MAIN 3-COLUMN BLUEPRINT
LEFT | CENTER | RIGHT
RIGHT IS INTENTIONALLY WIDER FOR MARKET CHART
========================================================== */
.hx-main{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* If the structural wrapper is present, use the same blueprint. */
.hx-main-grid-parent{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(210px, .80fr)
minmax(430px, 1.55fr)
minmax(320px, 1.10fr) !important;
gap:var(--hx-final-gap) !important;
align-items:stretch !important;
}
/* ==========================================================
03. COLUMN SAFETY
========================================================== */
.hx-main > *,
.hx-main-grid-parent > *{
min-width:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
04. MAIN PANEL HEIGHT
DO NOT LET OLD MIN-HEIGHT PUSH MARKET SLOT DOWN
========================================================== */
.hx-center-panel{
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
align-self:stretch !important;
}
/* ==========================================================
05. LEFT PANEL
========================================================== */
.hx-left-panel{
width:100% !important;
min-width:0 !important;
height:auto !important;
align-self:stretch !important;
}
/* ==========================================================
06. RIGHT PANEL
MARKET / SPONSORED / CHART
========================================================== */
.hx-right-panel{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-self:stretch !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Remove the old decorative extension that visually
continued the right panel below the real chart. */
.hx-right-panel::after{
display:none !important;
}
/* Live market and sponsored keep natural height. */
.hx-right-panel .hx-sponsored-widget,
.hx-right-panel .hx-sponsored{
flex:0 0 auto !important;
min-height:0 !important;
}
/* Market Chart receives the remaining right-column height. */
.hx-right-panel .hx-market-chart{
width:100% !important;
min-width:0 !important;
flex:1 1 auto !important;
min-height:230px !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Chart body must be able to fill the card. */
.hx-right-panel .hx-market-chart .hx-widget-body{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Actual chart area. */
.hx-right-panel .hx-chart,
.hx-right-panel .market-chart,
.hx-right-panel .chart-container{
width:100% !important;
min-width:0 !important;
min-height:230px !important;
height:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* ==========================================================
07. MARKET SLOT
MOVE UP AND ALIGN TO MAIN OUTER WIDTH
========================================================== */
.hx-market-slot-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:12px auto 0 !important;
min-width:0 !important;
padding:0 !important;
box-sizing:border-box !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
float:none !important;
clear:both !important;
}
/* Keep the actual market card full width. */
.hx-market-slot-section .hx-market-slot,
.hx-market-slot-section .hx-market-slot-body{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* ==========================================================
08. RUNNING MARKET / COIN TICKER
MOVE UP
========================================================== */
.hx-running-market-section{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
min-width:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* Cancel the old negative/large positioning tricks. */
.hx-ticker-row,
.hx-ticker{
margin-top:0 !important;
position:relative !important;
}
/* ==========================================================
09. FOOTER
RAISE IT AND ALIGN IT WITH MARKET SLOT
========================================================== */
.hx-footer{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:10px auto 0 !important;
padding:18px 22px 22px !important;
box-sizing:border-box !important;
transform:none !important;
}
/* Footer content follows the same outer width. */
.hx-footer-content{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
/* ==========================================================
10. HEADER ALIGNMENT
SAME OUTER WIDTH — NO ARTIFICIAL SHIFT
========================================================== */
.hx-header{
width:min(calc(100% - 32px), var(--hx-final-max)) !important;
max-width:var(--hx-final-max) !important;
margin:0 auto !important;
transform:none !important;
box-sizing:border-box !important;
}
/* ==========================================================
11. BUY AMOUNT — FORCE NAVY INPUT
NO WHITE BACKGROUND ON FIRST LOAD
========================================================== */
#buy input[type="number"],
#buy .hx-buy-amount,
#buyAmount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#173453 !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
appearance:textfield !important;
}
/* Placeholder */
#buy input[type="number"]::placeholder,
#buy .hx-buy-amount::placeholder,
#buyAmount::placeholder{
color:#71829A !important;
opacity:1 !important;
}
/* Focus / active */
#buy input[type="number"]:focus,
#buy input[type="number"]:active,
#buy .hx-buy-amount:focus,
#buyAmount:focus{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
border-color:#1B5F91 !important;
box-shadow:none !important;
outline:none !important;
}
/* Chrome / Edge autofill */
#buy input[type="number"]:-webkit-autofill,
#buy input[type="number"]:-webkit-autofill:hover,
#buy input[type="number"]:-webkit-autofill:focus,
#buyAmount:-webkit-autofill,
#buyAmount:-webkit-autofill:hover,
#buyAmount:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
-webkit-box-shadow:
0 0 0 1000px #0B182A inset !important;
box-shadow:
0 0 0 1000px #0B182A inset !important;
background-color:#0B182A !important;
}
/* ==========================================================
12. BUY INPUT GROUP
NAVY CONTAINER + NAVY AMOUNT FIELD
========================================================== */
#buy .hx-input-group{
background:#101D30 !important;
border-color:#263A56 !important;
}
#buy .hx-input-group .hx-buy-amount{
background:#0B182A !important;
background-color:#0B182A !important;
color:#FFFFFF !important;
}
/* ==========================================================
13. RESPONSIVE
========================================================== */
@media (max-width:900px){
.hx-main{
width:calc(100% - 24px) !important;
max-width:none !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
min-height:0 !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
height:auto !important;
}
.hx-right-panel .hx-market-chart{
min-height:240px !important;
flex:none !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 24px) !important;
max-width:none !important;
}
.hx-market-slot-section{
margin-top:12px !important;
}
.hx-running-market-section{
margin-top:10px !important;
}
.hx-footer{
margin-top:10px !important;
}
.hx-footer-content{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.hx-main{
width:calc(100% - 20px) !important;
}
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
}
.hx-footer-content{
grid-template-columns:1fr !important;
}
.hx-right-panel .hx-market-chart{
min-height:220px !important;
}
}
/* ==========================================================
END — HEREEXC FINAL LAYOUT BLUEPRINT V2
========================================================== */
/* ==========================================================
HEREEXC MARKET CHART HEIGHT TEST
========================================================== */
#hxTransactionPanel .hx-candle-area,
#hxTransactionPanel .hx-chart-placeholder{
min-height:220px !important;
height:220px !important;
box-sizing:border-box !important;
}/* ==========================================================
HEREEXC FINAL VERTICAL ALIGNMENT
MAIN PANELS → MARKET SLOT
========================================================== */
@media (min-width:901px){
/* Main row tetap rapat dan stabil */
.hx-main{
margin-bottom:0 !important;
}
/* Market Slot naik mendekati dasar main panel */
.hx-market-slot-section{
margin-top:-6px !important;
}
}/* ==========================================================
HEREEXC — WEB3 COLOR & HOVER FINISH
VISUAL ONLY
NO LAYOUT CHANGES
========================================================== */
/* ---------- MAIN PANELS ---------- */
.hx-widget,
.hx-panel,
.hx-left-panel,
.hx-center-panel,
.hx-right-panel{
/* warna saja */
background-color:#081A2D;
}
/* ---------- PANEL DEPTH ---------- */
.hx-widget{
border-color:
rgba(0,168,255,.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 0 14px rgba(0,120,255,.035);
}
/* ---------- HEADERS ---------- */
.hx-widget-header{
background-color:
rgba(14,39,64,.72) !important;
border-bottom-color:
rgba(0,168,255,.14) !important;
}
.hx-widget-header h2{
color:#F4F8FC !important;
}
/* ---------- BODY ---------- */
.hx-widget-body{
background-color:
rgba(7,25,43,.42);
}
/* ==========================================================
TEXT SHARPNESS
========================================================== */
.hx-widget strong,
.hx-widget h1,
.hx-widget h2,
.hx-widget h3{
text-shadow:
0 0 8px rgba(255,255,255,.07);
}
.hx-widget small{
color:
#8FA9C0 !important;
}
/* ==========================================================
LIVE MARKET
========================================================== */
.hx-market-item{
border-bottom-color:
rgba(76,200,255,.055) !important;
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hx-market-item:hover{
background-color:
rgba(0,168,255,.075) !important;
border-color:
rgba(0,168,255,.20) !important;
box-shadow:
inset 2px 0 0 rgba(0,168,255,.55);
}
/* ==========================================================
LIVE STATUS
========================================================== */
.hx-live-status{
color:#39E58A !important;
text-shadow:
0 0 8px rgba(57,229,138,.45);
}
/* ==========================================================
COIN DOT
========================================================== */
.hx-coin-dot{
box-shadow:
0 0 5px rgba(0,168,255,.70);
}
.hx-coin-dot.btc{
box-shadow:
0 0 7px rgba(247,147,26,.70);
}
.hx-coin-dot.xmr{
box-shadow:
0 0 7px rgba(255,102,0,.70);
}
/* ==========================================================
SPONSORED
========================================================== */
.hx-sponsored-image{
border-color:
rgba(76,200,255,.18) !important;
transition:
border-color .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.hx-sponsored-image:hover{
border-color:
rgba(76,200,255,.48) !important;
box-shadow:
0 0 18px rgba(0,168,255,.13);
filter:
brightness(1.04);
}
/* ==========================================================
MARKET CHART
========================================================== */
#hxTransactionPanel{
border-color:
rgba(0,168,255,.32) !important;
}
.hx-candle-area{
/* warna saja — ukuran tetap */
background-color:
#0B223A !important;
border-color:
rgba(0,168,255,.22) !important;
box-shadow:
inset 0 0 20px rgba(0,168,255,.025);
}
/* ==========================================================
CHART HOVER
========================================================== */
#hxTransactionPanel:hover{
border-color:
rgba(0,168,255,.43) !important;
}
/* ==========================================================
TRANSACTION BUTTON
========================================================== */
.hx-transaction-back{
background-color:
rgba(16,47,76,.82) !important;
border-color:
rgba(0,168,255,.20) !important;
}
.hx-transaction-back:hover{
background-color:
rgba(0,168,255,.12) !important;
border-color:
rgba(0,168,255,.45) !important;
box-shadow:
0 0 12px rgba(0,168,255,.12);
}
/* ==========================================================
GENERIC PREMIUM HOVER
========================================================== */
.hx-widget:hover{
border-color:
rgba(0,168,255,.40) !important;
}/* ==========================================================
HEREEXC — FINAL VERTICAL ROW SPACING
----------------------------------------------------------
RULE:
- BUY dan SELL memakai sistem spacing yang sama
- SWAP memiliki spacing sendiri
- Jarak hanya vertikal
- Tidak mengubah width
- Tidak mengubah grid utama
- Tidak mengubah HTML
- Tidak mengubah JS
- Tidak ada aturan spacing ganda
========================================================== */
/* ==========================================================
01 — GLOBAL ACTIVE PANEL
========================================================== */
.hx-panel.active{
box-sizing:border-box !important;
}
/* ==========================================================
02 — BUY + SELL
----------------------------------------------------------
Keduanya menggunakan ritme vertikal yang sama
========================================================== */
#buy.hx-panel.active,
#sell.hx-panel.active{
display:flex !important;
flex-direction:column !important;
}
/* ==========================================================
03 — ESTIMATED → RATE
========================================================== */
#buy > .hx-estimated-card,
#sell > .hx-estimated-card{
margin-bottom:10px !important;
}
/* ==========================================================
04 — RATE → INPUT FORM
========================================================== */
#buy > .hx-rate-options,
#sell > .hx-rate-options{
margin-bottom:10px !important;
}
/* ==========================================================
05 — INPUT FORM → ACTION
----------------------------------------------------------
BUY:
YOU PAY → BUY NOW
SELL:
YOU SELL → SELL NOW
========================================================== */
#buy > .hx-buy-card,
#sell > .hx-sell-card{
margin-bottom:10px !important;
}
/* ==========================================================
06 — ACTION → BALANCE
----------------------------------------------------------
BUY NOW → BALANCE
SELL NOW → BALANCE
========================================================== */
#buy > .hx-action-panel,
#sell > .hx-action-panel{
margin-bottom:10px !important;
}
/* ==========================================================
07 — INTERNAL ACTION ROW
========================================================== */
#buy .hx-action-panel,
#sell .hx-action-panel{
row-gap:8px !important;
}
/* ==========================================================
08 — BALANCE / WALLET ROW
----------------------------------------------------------
Balance tetap berada setelah action.
Tidak memakai auto margin agar tidak membuat
ruang kosong tidak terkontrol.
========================================================== */
#buy .hx-wallet-row,
#sell .hx-wallet-row{
width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
09 — PAYMENT GRID
========================================================== */
#buy .hx-payment-grid,
#sell .hx-payment-grid{
row-gap:8px !important;
}
/* ==========================================================
10 — SWAP
========================================================== */
#swap.hx-panel.active{
display:block !important;
}
/* ==========================================================
11 — SWAP FIELD
========================================================== */
#swap .hx-swap-field-card{
margin-bottom:10px !important;
}
/* ==========================================================
12 — SWAP SWITCH
========================================================== */
#swap .hx-swap-switch{
margin-bottom:10px !important;
}
/* ==========================================================
13 — SWAP RECEIVING
========================================================== */
#swap .hx-swap-receiving-section{
margin-top:10px !important;
}
/* ==========================================================
14 — SWAP AGREEMENT
========================================================== */
#swap .hx-swap-agreement-section{
margin-top:10px !important;
}
/* ==========================================================
15 — SWAP CONTINUE / ACTION
========================================================== */
#swap .hx-swap-action{
margin-top:10px !important;
}
/* ==========================================================
16 — SWAP INTERNAL LABEL
========================================================== */
#swap .hx-swap-field-card .hx-label{
margin-bottom:10px !important;
}
/* ==========================================================
17 — SWAP BUY ROW
========================================================== */
#swap .hx-swap-field-card .hx-buy-row{
margin-bottom:0 !important;
}
/* ==========================================================
18 — WIDTH PROTECTION
----------------------------------------------------------
Spacing tidak boleh memperlebar panel.
========================================================== */
#buy > *,
#sell > *,
#swap > *{
max-width:100% !important;
box-sizing:border-box !important;
}
/* ==========================================================
19 — NO HORIZONTAL GAP
========================================================== */
#buy,
#sell,
#swap{
box-sizing:border-box !important;
}
/* ==========================================================
HEREEXC — ESTIMATED ROW + RATE SPACING
----------------------------------------------------------
KHUSUS BUY & SELL
- Estimated dibuat lebih tinggi
- Tetap full width
- Jarak Estimated → Best Rate diperbesar
- Tidak mengubah lebar panel utama
- Tidak mengubah JS
- Tidak mengubah HTML
========================================================== */
/* ==========================================================
01 — ESTIMATED BUY
========================================================== */
#buy .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
02 — ESTIMATED SELL
========================================================== */
#sell .hx-estimated-card{
width:100% !important;
max-width:100% !important;
min-height:108px !important;
box-sizing:border-box !important;
padding-top:18px !important;
padding-bottom:18px !important;
margin-bottom:14px !important;
}
/* ==========================================================
03 — RATE OPTIONS
----------------------------------------------------------
Memberi ruang setelah Estimated.
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:14px !important;
}
/* ==========================================================
04 — JARAK ANTAR RATE CARD
----------------------------------------------------------
Best Rate | Fast | Decentralized
========================================================== */
#buy .hx-rate-options,
#sell .hx-rate-options{
gap:8px !important;
}
/* ==========================================================
05 — RATE CARD TETAP RAPI
========================================================== */
#buy .hx-rate-options > *,
#sell .hx-rate-options > *{
box-sizing:border-box !important;
}
/* ==========================================================
06 — BEST RATE
----------------------------------------------------------
Jangan dibuat lebih lebar dari card lainnya.
========================================================== */
#buy .hx-rate-options > :first-child,
#sell .hx-rate-options > :first-child{
box-sizing:border-box !important;
}
/* ==========================================================
07 — VERTICAL RHYTHM
========================================================== */
#buy .hx-estimated-card + .hx-rate-options,
#sell .hx-estimated-card + .hx-rate-options{
margin-top:0 !important;
}
/* ==========================================================
HEREEXC ORDER BAR
mengikuti struktur HISTORY
========================================================== */
.hx-order-bar{
width:100%;
display:flex;
align-items:center;
gap:8px;
position:relative;
box-sizing:border-box;
}
/* ==========================================================
ORDER CONTROL
========================================================== */
.hx-order-control{
position:relative;
flex:1;
min-width:0;
}
/* ==========================================================
ORDER BUTTON
========================================================== */
.hx-order-button{
width:100% !important;
min-height:42px !important;
height:42px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box;
border-radius:9px !important;
border:
1px solid
rgba(0,168,255,.20) !important;
background:#0B2035 !important;
color:#FFFFFF !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease;
}
/* OPEN */
.hx-order-button.is-active{
background:#102D47 !important;
border-color:#00A8FF !important;
}
/* HOVER */
.hx-order-button:hover{
background:#123451 !important;
}
/* ==========================================================
ORDER DROPDOWN
SAMA LOGIKA DENGAN HISTORY
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:52px !important;
left:0 !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
max-height:330px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
display:none !important;
z-index:9999 !important;
margin:0 !important;
padding:0 !important;
border-radius:10px !important;
background:#0B1F3A !important;
border:
1px solid
rgba(0,168,255,.28) !important;
box-shadow:
0 18px 45px
rgba(0,0,0,.55) !important;
}
/* OPEN */
.hx-order-dropdown.is-open{
display:block !important;
}
/* ==========================================================
HEADER
========================================================== */
.hx-order-dropdown-header{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:10px 12px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.hx-order-dropdown-header strong{
font-size:13px;
font-weight:800;
color:#FFFFFF;
}
/* ==========================================================
CLOSE
========================================================== */
.hx-order-dropdown-header button{
width:28px !important;
min-width:28px !important;
height:28px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
border-radius:7px !important;
background:rgba(255,255,255,.06) !important;
color:#FFFFFF !important;
font-size:18px !important;
line-height:1 !important;
cursor:pointer;
}
/* ==========================================================
RESULT
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
padding:10px;
}
/* EMPTY */
.hx-order-empty{
padding:18px 10px;
text-align:center;
font-size:10px;
color:#A8B7C4;
opacity:.65;
}
/* ==========================================================
SCROLLBAR
========================================================== */
.hx-order-dropdown::-webkit-scrollbar{
width:4px;
}
.hx-order-dropdown::-webkit-scrollbar-thumb{
border-radius:10px;
background:
rgba(255,255,255,.18);
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
OVERLAY / NO LAYOUT EXPANSION
========================================================== */
.hx-global-wallet{
position:relative !important;
overflow:visible !important;
}
/* Dropdown tidak ikut flow layout */
#hxAssetDropdown{
position:absolute !important;
top:100% !important;
left:0 !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:auto !important;
max-height:360px !important;
margin-top:6px !important;
padding:6px !important;
box-sizing:border-box !important;
display:none !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 20px rgba(0,168,255,.10) !important;
z-index:999999 !important;
}
/* HANYA ketika JS membuka */
#hxAssetDropdown.is-open{
display:block !important;
}/* ==========================================================
HEREEXC — ALL ASSET DROPDOWN
FINAL VISUAL FIX
HANYA UNTUK ALL ASSET
========================================================== */
#hxAssetDropdown{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
max-height:360px !important;
padding:6px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
background:#0B1C30 !important;
border:1px solid rgba(0,168,255,.35) !important;
border-radius:10px !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 18px rgba(0,168,255,.08) !important;
z-index:99999 !important;
}
/* ==========================================================
SEARCH
========================================================== */
#hxAssetDropdown .hx-asset-search{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 0 6px 0 !important;
padding:0 11px !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.28) !important;
border-radius:7px !important;
background:#0B1F3A !important;
color:#FFFFFF !important;
outline:none !important;
}
/* ==========================================================
COIN ITEM
========================================================== */
#hxAssetDropdown .hx-asset-item{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:44px !important;
min-height:44px !important;
margin:2px 0 !important;
padding:5px 8px !important;
box-sizing:border-box !important;
gap:9px !important;
overflow:hidden !important;
border:0 !important;
border-radius:7px !important;
background:transparent !important;
color:#FFFFFF !important;
text-align:left !important;
cursor:pointer !important;
}
/* ==========================================================
COIN LOGO
========================================================== */
#hxAssetDropdown .hx-asset-item img{
display:block !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
max-width:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
}
/* ==========================================================
TEXT CONTAINER
========================================================== */
#hxAssetDropdown .hx-asset-item span{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:7px !important;
min-width:0 !important;
width:auto !important;
overflow:hidden !important;
line-height:1 !important;
}
/* SYMBOL */
#hxAssetDropdown .hx-asset-item strong{
display:block !important;
flex:0 0 auto !important;
font-size:12px !important;
font-weight:800 !important;
color:#FFFFFF !important;
white-space:nowrap !important;
}
/* COIN NAME */
#hxAssetDropdown .hx-asset-item small{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
color:#8FA8C2 !important;
}
/* ==========================================================
HOVER
========================================================== */
#hxAssetDropdown .hx-asset-item:hover{
background:rgba(0,168,255,.12) !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxAssetDropdown::-webkit-scrollbar{
width:5px !important;
}
#hxAssetDropdown::-webkit-scrollbar-thumb{
background:rgba(76,200,255,.35) !important;
border-radius:10px !important;
}
#hxAssetDropdown::-webkit-scrollbar-track{
background:transparent !important;
}/* ==========================================================
HEREEXC — ALL ASSET SEARCH STICKY
========================================================== */
#hxAssetDropdown{
overflow-y:auto !important;
}
#hxAssetDropdown .hx-asset-search{
position:sticky !important;
top:0 !important;
z-index:10 !important;
background:#0B1C30 !important;
}
/* ==========================================================
HEREEXC — BUY NOW POPUP V1 FINAL
========================================================== */
body.hx-buy-popup-open{overflow:hidden !important;}
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:rgba(2,8,18,.78) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:2147483640 !important;
}
#hxBuyPopup.is-open{display:flex !important;}
#hxBuyPopup::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(0,168,255,.10),transparent 45%);}
.hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 28px)) !important;
max-height:min(92vh,900px) !important;
overflow:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(0,168,255,.42) !important;
border-radius:18px !important;
background:linear-gradient(145deg,#0C1D31,#071321 70%,#091A2C) !important;
box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 45px rgba(0,168,255,.10) !important;
color:#fff !important;
scrollbar-width:thin;
}
.hx-buy-popup-card::-webkit-scrollbar{width:5px}.hx-buy-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.hx-buy-popup-header{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,19,33,.96);backdrop-filter:blur(12px);box-sizing:border-box}
.hx-buy-popup-brand{min-width:0;display:flex;align-items:center;gap:10px}.hx-buy-popup-brand img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.hx-buy-popup-brand h2{margin:0;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.hx-buy-popup-x{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.hx-buy-popup-x:hover{background:rgba(255,255,255,.10)}
.hx-buy-popup-body{padding:14px 16px 16px;box-sizing:border-box}
.hx-buy-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.hx-buy-summary-card{min-width:0;padding:13px 14px;border:1px solid rgba(59,130,246,.28);border-radius:11px;background:linear-gradient(145deg,#122B45,#0E2035);box-sizing:border-box}.hx-buy-summary-card small,.hx-buy-status-card small,.hx-buy-id-card small{display:block;margin-bottom:7px;color:#83A9D2;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-summary-card strong{min-width:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hx-buy-summary-card img{width:27px;height:27px;flex:0 0 27px;border-radius:50%;object-fit:contain}
.hx-buy-popup-section{margin-bottom:10px;padding:13px;border:1px solid rgba(59,130,246,.25);border-radius:12px;background:linear-gradient(145deg,#112943,#0D2035);box-sizing:border-box}.hx-buy-popup-section>label{display:block;margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.65px}
.hx-buy-address-row{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 9px;border:1px solid rgba(37,211,102,.26);border-radius:9px;background:#0A192A;box-sizing:border-box}.hx-buy-address-row img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:50%}.hx-buy-address-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px;font-weight:700}.hx-buy-address-row input::placeholder{color:#6E829B}.hx-buy-address-section>small{display:block;margin-top:6px;color:#7188A5;font-size:9px}
.hx-buy-payment-select-wrap{position:relative}.hx-buy-payment-select{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(0,168,255,.34);border-radius:10px;background:#0A1B2E;color:#fff;cursor:pointer}.hx-buy-payment-select strong{flex:1;text-align:left;font-size:11px;font-weight:900}.hx-buy-payment-menu{position:absolute;left:0;right:0;top:52px;display:none;padding:6px;border:1px solid rgba(0,168,255,.30);border-radius:10px;background:#081522;box-shadow:0 18px 45px rgba(0,0,0,.55);z-index:50}.hx-buy-payment-menu.is-open{display:block}.hx-buy-payment-option{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}.hx-buy-payment-option:hover{background:rgba(0,168,255,.10)}.hx-buy-payment-option strong{font-size:10px}.hx-buy-payment-option em{font-style:normal;font-size:8px;color:#FFB45C}.hx-buy-payment-option.is-coming-soon{opacity:.55;cursor:not-allowed}
.hx-buy-payment-details{margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A}.hx-buy-payment-placeholder{color:#7188A5;text-align:center;font-size:10px;padding:9px}.hx-buy-detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:#fff;font-size:10px}.hx-buy-detail-head span{color:#25D366;font-weight:900}.hx-buy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:10px}.hx-buy-detail-row span{color:#7890AD}.hx-buy-detail-row strong{color:#fff;text-align:right}.hx-inline-action{border:0;background:transparent;color:#25D366;cursor:pointer;padding:0 2px}.hx-buy-detail-note{margin-top:8px;padding:8px;border-radius:7px;background:rgba(37,211,102,.07);color:#8DA5BD;font-size:9px}.hx-buy-qris-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}.hx-buy-qris-image-wrap{width:150px;height:150px;padding:7px;background:#fff;border-radius:10px;box-sizing:border-box}.hx-buy-qris-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}.hx-buy-qris-copy strong{display:block;color:#fff;font-size:11px;line-height:1.4}.hx-buy-qris-copy p{margin:7px 0 10px;color:#8198B1;font-size:9px;line-height:1.5}.hx-buy-download{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:7px;background:#0E79FF;color:#fff;text-decoration:none;font-size:9px;font-weight:900}.hx-buy-wallet-detail{display:flex;align-items:center;gap:10px}.hx-buy-wallet-logo{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2E90FF;color:#fff;font-size:20px}.hx-buy-wallet-detail strong{font-size:11px}.hx-buy-wallet-detail p{margin:5px 0 0;color:#8198B1;font-size:9px;line-height:1.45}
.hx-buy-status-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:10px;margin-bottom:10px}.hx-buy-status-card,.hx-buy-id-card{min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(76,200,255,.18);border-radius:10px;background:#0E243B;box-sizing:border-box}.hx-buy-status-card strong,.hx-buy-id-card strong{display:block;color:#fff;font-size:11px;font-weight:900}.hx-buy-status-icon{width:29px;height:29px;flex:0 0 29px;border:2px solid rgba(37,211,102,.25);border-top-color:#25D366;border-radius:50%;box-sizing:border-box}.hx-buy-status-icon.is-waiting{animation:hxBuyStatusSpin 1s linear infinite}.hx-buy-status-icon.is-ready{border-color:#25D366;position:relative;animation:none}.hx-buy-status-icon.is-ready::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#25D366;font-size:17px;font-weight:900}@keyframes hxBuyStatusSpin{to{transform:rotate(360deg)}}
.hx-buy-paid-section{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0A192A;margin-bottom:10px}.hx-buy-paid-title{margin-bottom:8px;color:#8FB7E7;font-size:9px;font-weight:900;letter-spacing:.55px}.hx-buy-paid-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hx-buy-paid-option{min-height:38px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:#11243A;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.hx-buy-paid-option:hover,.hx-buy-paid-option.is-selected{border-color:#25D366;background:rgba(37,211,102,.10);color:#25D366}.hx-buy-paid-option.is-coming-soon{opacity:.45;cursor:not-allowed}.hx-buy-paid-selected{padding:9px;border:1px solid rgba(37,211,102,.25);border-radius:8px;color:#25D366;font-size:10px;font-weight:900;background:rgba(37,211,102,.06)}
.hx-buy-order-message{min-height:17px;margin:3px 0 8px;color:#7D93AA;font-size:9px;text-align:center}.hx-buy-order-message.is-ready{color:#25D366}.hx-buy-popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hx-buy-popup-actions button{height:44px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.hx-buy-cancel{border:1px solid rgba(255,255,255,.14);background:#102137;color:#fff}.hx-buy-confirm{border:1px solid rgba(37,211,102,.40);background:linear-gradient(145deg,#25D366,#16A34A);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.15)}.hx-buy-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hx-buy-security-note{text-align:center;margin-top:9px;color:#627A94;font-size:8px}
/* ==========================================================
BUY ORDER DROPDOWN — SINGLE ACTIVE DETAIL
========================================================== */
.hx-order-dropdown{width:min(460px,calc(100vw - 24px)) !important;max-width:min(460px,calc(100vw - 24px)) !important;max-height:min(560px,calc(100vh - 24px)) !important;background:#0B1F3A !important;border-color:rgba(0,168,255,.30) !important;border-radius:12px !important;box-shadow:0 22px 60px rgba(0,0,0,.62) !important}.hx-order-list{padding:10px !important}.hx-order-item{margin-bottom:8px !important;padding:8px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:linear-gradient(145deg,#0D2034,#091827) !important}.hx-order-check{width:100%;min-height:42px;padding:0 11px;border:1px solid rgba(0,168,255,.20);border-radius:8px;background:#102A43;color:#fff;text-align:left;font-size:10px;font-weight:900;cursor:pointer}.hx-order-check:hover{border-color:#00A8FF;background:#123451}.hx-order-item.is-expanded .hx-order-check{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366}.hx-order-detail{padding:9px 3px 2px}.hx-order-detail-row{display:flex;justify-content:space-between;gap:10px;padding:7px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-row span{color:#7289A2}.hx-order-detail-row strong{color:#fff;text-align:right}.hx-order-detail-address{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px}.hx-order-detail-address span{display:block;color:#7289A2;margin-bottom:5px}.hx-order-detail-address div{color:#D7E4F2;word-break:break-all;line-height:1.4}.hx-order-detail-time{padding:8px 5px 3px;color:#617B96;font-size:8px}.hx-order-empty{padding:22px 10px !important;color:#8198B1 !important;text-align:center}
@media(max-width:700px){
#hxBuyPopup{padding:9px !important}.hx-buy-popup-card{width:calc(100vw - 12px) !important;max-height:calc(100dvh - 12px) !important;border-radius:14px !important}.hx-buy-popup-body{padding:11px}.hx-buy-popup-brand h2{font-size:15px}.hx-buy-summary-grid,.hx-buy-status-grid{grid-template-columns:1fr}.hx-buy-paid-options{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-buy-qris-layout{grid-template-columns:110px minmax(0,1fr)}.hx-buy-qris-image-wrap{width:110px;height:110px}.hx-buy-popup-actions button{height:42px}.hx-buy-popup-header{min-height:58px;padding:10px 12px}
}
@media(max-width:430px){.hx-buy-summary-card strong{font-size:12px}.hx-buy-popup-brand img{width:30px;height:30px}.hx-buy-popup-brand h2{font-size:13px}.hx-buy-qris-layout{grid-template-columns:1fr}.hx-buy-qris-image-wrap{margin:0 auto}.hx-buy-paid-options{grid-template-columns:1fr 1fr}.hx-buy-payment-option{grid-template-columns:24px 1fr}.hx-buy-payment-option em{display:none}}
/* ==========================================================
HEREEXC — BUY ORDER V2 PREMIUM WEB3 FINISH
========================================================== */
#hxBuyPopup::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.16;
background-image:linear-gradient(rgba(76,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.12) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
.hx-buy-popup-card{
border-color:rgba(76,200,255,.48) !important;
background:
radial-gradient(circle at 88% 0%,rgba(0,168,255,.13),transparent 30%),
radial-gradient(circle at 5% 70%,rgba(37,211,102,.055),transparent 25%),
linear-gradient(145deg,#0E243B 0%,#071523 58%,#0A1C30 100%) !important;
box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(0,168,255,.13),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.hx-buy-popup-header{
background:linear-gradient(180deg,rgba(10,27,45,.97),rgba(7,19,33,.94)) !important;
border-bottom-color:rgba(76,200,255,.14) !important;
}
.hx-buy-popup-brand h2{letter-spacing:.35px;text-shadow:0 0 18px rgba(76,200,255,.12)}
.hx-buy-popup-x:hover{border-color:rgba(76,200,255,.35);color:#4CC8FF;box-shadow:0 0 18px rgba(0,168,255,.12)}
.hx-buy-summary-card,
.hx-buy-popup-section,
.hx-buy-status-card,
.hx-buy-id-card,
.hx-buy-paid-section{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hx-buy-summary-card{border-color:rgba(76,200,255,.30) !important;background:linear-gradient(145deg,rgba(18,43,69,.96),rgba(9,27,45,.96)) !important}
.hx-buy-popup-section{border-color:rgba(76,200,255,.26) !important;background:linear-gradient(145deg,rgba(17,41,67,.96),rgba(9,27,45,.96)) !important}
.hx-buy-address-row{box-shadow:0 0 0 1px rgba(37,211,102,.035),inset 0 0 22px rgba(0,168,255,.035)}
.hx-buy-payment-select{box-shadow:inset 0 0 18px rgba(0,168,255,.035)}
.hx-buy-payment-details{border-color:rgba(76,200,255,.16);background:rgba(6,18,31,.72)}
.hx-buy-status-card,.hx-buy-id-card{background:linear-gradient(145deg,#102B46,#0A1E33);border-color:rgba(76,200,255,.22)}
.hx-buy-paid-section{border-color:rgba(76,200,255,.12);background:rgba(7,19,33,.62)}
.hx-buy-confirm:not(:disabled){box-shadow:0 10px 28px rgba(37,211,102,.18),0 0 24px rgba(37,211,102,.08)}
/* DANA / DIGITAL WALLET */
.hx-buy-wallet-detail{display:grid !important;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center}
.hx-buy-wallet-brand{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22);overflow:hidden}
.hx-buy-wallet-brand img{width:42px;height:42px;object-fit:contain;display:block}
.hx-buy-wallet-main{min-width:0}
.hx-buy-wallet-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-buy-wallet-action-row strong{font-size:11px;color:#fff}
.hx-buy-send-fund{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:8px;border:1px solid rgba(0,168,255,.42);background:linear-gradient(135deg,#0E79FF,#006EDC);color:#fff !important;text-decoration:none !important;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 7px 20px rgba(0,110,220,.20)}
.hx-buy-send-fund:hover{transform:translateY(-1px);border-color:#4CC8FF;box-shadow:0 9px 24px rgba(0,168,255,.22)}
.hx-buy-wallet-main p{margin:7px 0 0 !important;color:#91A8C0 !important;font-size:9px !important;line-height:1.45 !important}
}
/* ==========================================================
HEREEXC — BUY / SELL ORDER DROPDOWN
MATCH HISTORY WIDTH
========================================================== */
/* ORDER BAR */
.hx-order-bar{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:start;
box-sizing:border-box;
}
/* BUY / SELL CONTROL */
.hx-order-control{
position:relative;
min-width:0;
width:100%;
box-sizing:border-box;
}
/* BUY / SELL BUTTON */
.hx-order-button{
width:100%;
box-sizing:border-box;
position:relative;
z-index:5;
}
/* ==========================================================
COMMON DROPDOWN
========================================================== */
.hx-order-dropdown{
position:absolute !important;
top:calc(100% + 8px);
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
);
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-6px);
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* ==========================================================
OPEN STATE
========================================================== */
.hx-order-dropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* ==========================================================
BUY DROPDOWN
START FROM LEFT EDGE
========================================================== */
#hxBuyOrderDropdown{
left:0;
right:auto;
}
/* ==========================================================
SELL DROPDOWN
START FROM RIGHT EDGE
========================================================== */
#hxSellOrderDropdown{
left:auto;
right:0;
}
/* ==========================================================
DROPDOWN HEADER
========================================================== */
.hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
background:
linear-gradient(
180deg,
rgba(20,48,76,.72),
rgba(10,28,47,.45)
);
}
/* TITLE */
.hx-order-dropdown-header strong{
font-size:14px;
font-weight:800;
letter-spacing:.4px;
color:#fff;
}
/* CLOSE */
.hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:
background .18s ease,
transform .18s ease;
}
.hx-order-dropdown-header button:hover{
background:rgba(255,255,255,.12);
transform:scale(1.04);
}
/* ==========================================================
RESULT AREA
========================================================== */
.hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
overflow:hidden;
}
/* EMPTY STATE */
.hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:700px){
.hx-order-bar{
grid-template-columns:1fr 1fr;
gap:6px;
}
.hx-order-dropdown{
width:calc(200% + 6px) !important;
max-width:calc(200% + 6px) !important;
border-radius:14px;
}
.hx-order-dropdown-header{
min-height:48px;
padding:0 13px;
}
.hx-order-result{
padding:14px;
}
}/* ==========================================================
HEREEXC — SELL ORDER DROPDOWN
SPECIFIC SELL ID
========================================================== */
#hxSellOrderDropdown{
position:absolute !important;
top:calc(100% + 8px) !important;
left:auto !important;
right:0 !important;
width:calc(200% + 8px) !important;
max-width:calc(200% + 8px) !important;
box-sizing:border-box;
z-index:9999;
overflow:hidden;
border-radius:16px;
background:
linear-gradient(
180deg,
rgba(13,35,58,.98),
rgba(5,18,32,.99)
) !important;
border:1px solid rgba(0,168,255,.38);
box-shadow:
0 18px 45px rgba(0,0,0,.48),
0 0 24px rgba(0,168,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
/* OPEN STATE */
#hxSellOrderDropdown.is-open,
#hxSellOrderDropdown[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
/* SELL HEADER */
#hxSellOrderDropdown .hx-order-dropdown-header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:52px;
padding:0 16px;
border-bottom:1px solid rgba(0,168,255,.16);
}
/* SELL TITLE */
#hxSellOrderDropdown .hx-order-dropdown-header strong{
color:#fff;
font-size:14px;
font-weight:800;
letter-spacing:.4px;
}
/* SELL CLOSE */
#hxSellOrderDropdown .hx-order-dropdown-header button{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
background:rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
}
/* SELL RESULT */
#hxSellOrderDropdown .hx-order-result{
width:100%;
box-sizing:border-box;
min-height:110px;
padding:18px;
}
/* SELL EMPTY */
#hxSellOrderDropdown .hx-order-empty{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(210,225,240,.55);
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 EDITION
HEADER + SCROLLBAR
========================================================== */
/* ==========================================================
POPUP CONTAINER
========================================================== */
#hxBuyPopup,
.hx-buy-popup,
.hx-buy-card{
background:
radial-gradient(
circle at 50% 0%,
rgba(0,168,255,.10),
transparent 38%
),
linear-gradient(
180deg,
#07182b 0%,
#061322 48%,
#04101d 100%
) !important;
border:1px solid rgba(0,168,255,.48) !important;
border-radius:18px !important;
box-shadow:
0 30px 80px rgba(0,0,0,.68),
0 0 45px rgba(0,168,255,.10),
inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#fff;
overflow-y:auto !important;
scrollbar-width:thin;
scrollbar-color:
#168cff
rgba(8,25,43,.85);
}
/* ==========================================================
WEBKIT SCROLLBAR
========================================================== */
#hxBuyPopup::-webkit-scrollbar,
.hx-buy-popup::-webkit-scrollbar,
.hx-buy-card::-webkit-scrollbar{
width:8px;
}
/* TRACK */
#hxBuyPopup::-webkit-scrollbar-track,
.hx-buy-popup::-webkit-scrollbar-track,
.hx-buy-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061426,
#081d31
);
border-left:1px solid rgba(0,168,255,.08);
}
/* ==========================================================
BUY HEADER
========================================================== */
#hxBuyPopup .hx-popup-header,
#hxBuyPopup .hx-buy-popup-header,
.hx-buy-popup .hx-popup-header,
.hx-buy-card .hx-popup-header{
position:relative;
min-height:68px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
/* ruang tetap untuk tombol X di kanan */
padding:10px 58px;
background:
linear-gradient(
180deg,
rgba(12,38,63,.95),
rgba(7,24,41,.78)
);
border-bottom:1px solid rgba(0,168,255,.22);
box-shadow:
0 8px 24px rgba(0,0,0,.22);
}
/* ==========================================================
HEADER TITLE
LOGO + HEREEXC BUY ORDER
TETAP DI TENGAH
========================================================== */
#hxBuyPopup .hx-popup-header h2,
#hxBuyPopup .hx-buy-popup-header h2,
.hx-buy-popup .hx-popup-header h2,
.hx-buy-card .hx-popup-header h2{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
}/* ==========================================================
HEREEXC BUY ORDER POPUP
PREMIUM WEB3 — FINAL CLEAN CSS
TARGET: ACTUAL BUY POPUP CLASSES
HTML / JS TIDAK DIUBAH
========================================================== */
/* ==========================================================
01. POPUP BACKDROP
========================================================== */
#hxBuyPopup{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
box-sizing:border-box !important;
background:
radial-gradient(
circle at 50% 35%,
rgba(0,168,255,.08),
transparent 42%
),
rgba(2,7,16,.82) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
z-index:2147483640 !important;
}
/* OPEN */
#hxBuyPopup.is-open{
display:flex !important;
}
/* ==========================================================
02. POPUP CARD
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
position:relative !important;
width:min(720px,calc(100vw - 32px)) !important;
max-height:min(900px,calc(100vh - 32px)) !important;
max-height:min(900px,calc(100dvh - 32px)) !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
box-sizing:border-box !important;
border:1px solid rgba(76,200,255,.52) !important;
border-radius:20px !important;
background:
radial-gradient(
circle at 92% 0%,
rgba(0,168,255,.14),
transparent 28%
),
radial-gradient(
circle at 0% 80%,
rgba(37,211,102,.035),
transparent 28%
),
linear-gradient(
145deg,
#0D2238 0%,
#071625 52%,
#061321 100%
) !important;
box-shadow:
0 35px 100px rgba(0,0,0,.78),
0 0 55px rgba(0,168,255,.13),
inset 0 1px 0
rgba(255,255,255,.065) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#168CFF
#071625;
}
/* ==========================================================
03. WEB3 GRID
========================================================== */
#hxBuyPopup .hx-buy-popup-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.20;
background-image:
linear-gradient(
rgba(76,200,255,.075) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(76,200,255,.075) 1px,
transparent 1px
);
background-size:36px 36px;
mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
-webkit-mask-image:
linear-gradient(
to bottom,
rgba(0,0,0,.9),
transparent 72%
);
}
/* Keep content above grid */
#hxBuyPopup .hx-buy-popup-card > *{
position:relative;
z-index:1;
}
/* ==========================================================
04. SCROLLBAR — HEREEXC BLUE
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:
linear-gradient(
180deg,
#061321,
#091B2D
);
border-left:
1px solid
rgba(76,200,255,.08);
border-radius:10px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
min-height:55px;
background:
linear-gradient(
180deg,
#4CC8FF 0%,
#168CFF 48%,
#006EDC 100%
);
border:
2px solid
#071625;
border-radius:20px;
box-shadow:
0 0 10px
rgba(0,168,255,.38);
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:
linear-gradient(
180deg,
#72D4FF,
#269BFF,
#0879E8
);
box-shadow:
0 0 16px
rgba(0,168,255,.55);
}
/* ==========================================================
05. HEADER
LOGO + TITLE CENTER
X STAYS AT FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
position:relative !important;
min-height:72px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:
10px
62px
10px
62px !important;
box-sizing:border-box !important;
background:
linear-gradient(
180deg,
rgba(11,34,56,.98),
rgba(7,21,36,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.18) !important;
box-shadow:
0 8px 25px
rgba(0,0,0,.20) !important;
z-index:10 !important;
}
/* ==========================================================
06. CENTERED BRAND GROUP
========================================================== */
#hxBuyPopup .hx-buy-popup-brand{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:max-content !important;
max-width:calc(100% - 125px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
/* LOGO */
#hxBuyPopup .hx-buy-popup-brand img{
width:34px !important;
height:34px !important;
min-width:34px !important;
object-fit:contain !important;
display:block !important;
filter:
drop-shadow(
0 0 8px
rgba(0,168,255,.35)
);
}
/* TITLE */
#hxBuyPopup .hx-buy-popup-brand h2{
margin:0 !important;
padding:0 !important;
color:#FFFFFF !important;
font-size:17px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
white-space:nowrap !important;
text-align:center !important;
text-shadow:
0 0 18px
rgba(76,200,255,.12);
}
/* ==========================================================
07. X — DO NOT MOVE
FIXED TO FAR RIGHT
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
position:absolute !important;
top:50% !important;
right:14px !important;
left:auto !important;
transform:translateY(-50%) !important;
width:38px !important;
height:38px !important;
min-width:38px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid
rgba(255,255,255,.10) !important;
border-radius:10px !important;
background:
rgba(255,255,255,.045) !important;
color:#FFFFFF !important;
font-size:23px !important;
line-height:1 !important;
cursor:pointer !important;
z-index:30 !important;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:
rgba(0,168,255,.12) !important;
border-color:
rgba(76,200,255,.48) !important;
color:#4CC8FF !important;
box-shadow:
0 0 18px
rgba(0,168,255,.16);
}
/* ==========================================================
08. BODY
========================================================== */
#hxBuyPopup .hx-buy-popup-body{
position:relative;
padding:
16px
18px
18px !important;
box-sizing:border-box;
background:
linear-gradient(
180deg,
rgba(5,17,29,.12),
rgba(3,12,22,.30)
);
}
/* ==========================================================
09. SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-grid{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-summary-card{
min-width:0 !important;
min-height:78px !important;
padding:13px 14px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(76,200,255,.28) !important;
border-radius:12px !important;
background:
linear-gradient(
145deg,
rgba(18,48,76,.96),
rgba(8,27,45,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.035),
0 5px 18px
rgba(0,0,0,.12);
}
#hxBuyPopup .hx-buy-summary-card small{
display:block;
margin:0 0 8px;
color:#7FB3DE;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-summary-card strong{
min-width:0;
display:flex;
align-items:center;
gap:8px;
color:#FFFFFF;
font-size:15px;
font-weight:900;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#hxBuyPopup .hx-buy-summary-card img{
width:28px !important;
height:28px !important;
min-width:28px !important;
object-fit:contain !important;
border-radius:50%;
}
/* ==========================================================
10. ALL MAIN SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
margin:0 0 11px !important;
padding:14px !important;
border:
1px solid
rgba(76,200,255,.24) !important;
border-radius:13px !important;
background:
linear-gradient(
145deg,
rgba(16,42,68,.96),
rgba(7,25,42,.96)
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-popup-section > label{
display:block;
margin:0 0 8px;
color:#8FC2EA;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
}
/* ==========================================================
11. RECEIVE ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
min-height:50px;
display:flex;
align-items:center;
gap:10px;
padding:
7px
10px !important;
box-sizing:border-box;
border:
1px solid
rgba(0,168,255,.30) !important;
border-radius:10px;
background:
linear-gradient(
180deg,
#0A1D30,
#071726
) !important;
box-shadow:
inset 0 0 20px
rgba(0,168,255,.035);
}
#hxBuyPopup .hx-buy-address-row img{
width:30px !important;
height:30px !important;
min-width:30px !important;
object-fit:contain !important;
}
#hxBuyPopup .hx-buy-address-row input{
width:100% !important;
min-width:0 !important;
height:36px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-size:12px !important;
font-weight:700 !important;
}
#hxBuyPopup .hx-buy-address-row input::placeholder{
color:#7089A3 !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(0,168,255,.75) !important;
box-shadow:
0 0 0 2px
rgba(0,168,255,.08),
0 0 20px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-address-section > small{
display:block;
margin-top:6px;
color:#6F89A3;
font-size:9px;
}
/* ==========================================================
12. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
min-height:48px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:
0 13px !important;
box-sizing:border-box !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:10px !important;
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
color:#FFFFFF !important;
cursor:pointer;
box-shadow:
inset 0 0 18px
rgba(0,168,255,.025);
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(76,200,255,.68) !important;
box-shadow:
0 0 18px
rgba(0,168,255,.08);
}
#hxBuyPopup .hx-buy-payment-select strong{
flex:1;
text-align:left;
font-size:11px;
font-weight:900;
}
/* ==========================================================
13. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
position:absolute !important;
top:54px !important;
left:0 !important;
right:0 !important;
padding:7px !important;
border:
1px solid
rgba(0,168,255,.38) !important;
border-radius:11px !important;
background:
linear-gradient(
180deg,
#0A2034,
#061522
) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(0,168,255,.08);
z-index:100 !important;
}
#hxBuyPopup .hx-buy-payment-option{
min-height:42px;
border-radius:8px !important;
transition:
background .18s ease,
border-color .18s ease;
}
#hxBuyPopup .hx-buy-payment-option:hover{
background:
rgba(0,168,255,.10) !important;
}
/* ==========================================================
14. PAYMENT DETAILS
========================================================== */
#hxBuyPopup .hx-buy-payment-details{
margin-top:9px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:10px !important;
background:
rgba(4,17,29,.78) !important;
}
#hxBuyPopup .hx-buy-payment-placeholder{
color:#7189A2;
text-align:center;
font-size:10px;
padding:10px;
}
/* ==========================================================
15. STATUS + INTERNAL ID
========================================================== */
#hxBuyPopup .hx-buy-status-grid{
display:grid !important;
grid-template-columns:
minmax(0,1.45fr)
minmax(190px,1fr) !important;
gap:10px !important;
margin:0 0 11px !important;
}
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:13px;
box-sizing:border-box;
border:
1px solid
rgba(76,200,255,.23) !important;
border-radius:11px;
background:
linear-gradient(
145deg,
#102D48,
#091E32
) !important;
box-shadow:
inset 0 1px 0
rgba(255,255,255,.025);
}
#hxBuyPopup .hx-buy-status-card small,
#hxBuyPopup .hx-buy-id-card small{
display:block;
margin-bottom:7px;
color:#82A8CD;
font-size:9px;
font-weight:900;
letter-spacing:.55px;
}
#hxBuyPopup .hx-buy-status-card strong,
#hxBuyPopup .hx-buy-id-card strong{
display:block;
color:#FFFFFF;
font-size:11px;
font-weight:900;
}
/* ==========================================================
16. WAITING ICON
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
box-sizing:border-box;
border:
2px solid
rgba(37,211,102,.22) !important;
border-top-color:
#25D366 !important;
}
#hxBuyPopup .hx-buy-status-icon.is-waiting{
animation:
hxBuyStatusSpin
1s linear infinite !important;
}
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
animation:none !important;
}
/* ==========================================================
17. I HAVE PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
margin:0 0 10px !important;
padding:13px !important;
border:
1px solid
rgba(76,200,255,.17) !important;
border-radius:11px !important;
background:
rgba(6,19,32,.72) !important;
}
#hxBuyPopup .hx-buy-paid-title{
margin:0 0 9px;
color:#8FB7E7;
font-size:9px;
font-weight:900;
letter-spacing:.65px;
}
#hxBuyPopup .hx-buy-paid-options{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxBuyPopup .hx-buy-paid-option{
min-height:40px !important;
border:
1px solid
rgba(76,200,255,.16) !important;
border-radius:8px !important;
background:
linear-gradient(
180deg,
#122B45,
#0B1E31
) !important;
color:#FFFFFF !important;
font-size:9px !important;
font-weight:900 !important;
cursor:pointer;
transition:
.18s ease;
}
#hxBuyPopup .hx-buy-paid-option:hover{
border-color:
rgba(76,200,255,.58) !important;
background:
rgba(0,168,255,.10) !important;
}
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.10) !important;
color:#25D366 !important;
box-shadow:
0 0 16px
rgba(37,211,102,.08);
}
#hxBuyPopup .hx-buy-paid-option.is-coming-soon{
opacity:.42 !important;
cursor:not-allowed !important;
}
/* ==========================================================
18. ACTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:4px !important;
}
#hxBuyPopup .hx-buy-popup-actions button{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer;
}
/* CANCEL */
#hxBuyPopup .hx-buy-cancel{
border:
1px solid
rgba(255,255,255,.13) !important;
background:
linear-gradient(
180deg,
#122840,
#0B1D30
) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
border-color:
rgba(255,255,255,.28) !important;
background:
#17324D !important;
}
/* CONFIRM */
#hxBuyPopup .hx-buy-confirm{
border:
1px solid
rgba(37,211,102,.42) !important;
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px
rgba(37,211,102,.14);
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
filter:brightness(1.08);
box-shadow:
0 10px 30px
rgba(37,211,102,.22),
0 0 20px
rgba(37,211,102,.10);
}
#hxBuyPopup .hx-buy-confirm:disabled{
opacity:.38 !important;
cursor:not-allowed !important;
box-shadow:none !important;
}
/* ==========================================================
19. MESSAGE + SECURITY
========================================================== */
#hxBuyPopup .hx-buy-order-message{
min-height:17px;
margin:3px 0 8px;
color:#7D96AF;
font-size:9px;
text-align:center;
}
#hxBuyPopup .hx-buy-order-message.is-ready{
color:#25D366;
}
#hxBuyPopup .hx-buy-security-note{
margin-top:10px;
color:#66809A;
font-size:8px;
text-align:center;
}
/* ==========================================================
20. DIGITAL WALLET / DANA
========================================================== */
#hxBuyPopup .hx-buy-wallet-detail{
display:grid !important;
grid-template-columns:
54px minmax(0,1fr) !important;
gap:12px !important;
align-items:center;
}
#hxBuyPopup .hx-buy-wallet-brand{
width:54px !important;
height:54px !important;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF !important;
border-radius:12px;
overflow:hidden;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 22px
rgba(0,0,0,.25);
}
#hxBuyPopup .hx-buy-wallet-brand img{
width:42px !important;
height:42px !important;
object-fit:contain !important;
}
/* SEND FUND */
#hxBuyPopup .hx-buy-send-fund{
min-height:34px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
border:
1px solid
rgba(76,200,255,.42);
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
);
color:#FFFFFF !important;
text-decoration:none !important;
font-size:9px;
font-weight:900;
box-shadow:
0 7px 20px
rgba(0,110,220,.20);
}
#hxBuyPopup .hx-buy-send-fund:hover{
transform:translateY(-1px);
border-color:#4CC8FF;
box-shadow:
0 9px 25px
rgba(0,168,255,.25);
}
/* ==========================================================
21. QRIS
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
background:#FFFFFF !important;
border:
1px solid
rgba(255,255,255,.16);
box-shadow:
0 8px 25px
rgba(0,0,0,.22);
}
#hxBuyPopup .hx-buy-download{
background:
linear-gradient(
135deg,
#168CFF,
#006EDC
) !important;
border:
1px solid
rgba(76,200,255,.35);
box-shadow:
0 7px 18px
rgba(0,110,220,.18);
}
/* ==========================================================
22. MOBILE
========================================================== */
@media(max-width:700px){
#hxBuyPopup{
padding:9px !important;
}
#hxBuyPopup .hx-buy-popup-card{
width:
calc(100vw - 18px) !important;
max-height:
calc(100dvh - 18px) !important;
border-radius:15px !important;
}
#hxBuyPopup .hx-buy-popup-header{
min-height:62px !important;
padding:
9px
55px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
max-width:
calc(100% - 105px) !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:30px !important;
height:30px !important;
min-width:30px !important;
}
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:14px !important;
}
#hxBuyPopup .hx-buy-popup-body{
padding:
12px !important;
}
#hxBuyPopup .hx-buy-summary-grid,
#hxBuyPopup .hx-buy-status-grid{
grid-template-columns:1fr !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:430px){
#hxBuyPopup .hx-buy-popup-brand h2{
font-size:13px !important;
}
#hxBuyPopup .hx-buy-popup-brand{
gap:7px !important;
}
#hxBuyPopup .hx-buy-popup-brand img{
width:28px !important;
height:28px !important;
min-width:28px !important;
}
#hxBuyPopup .hx-buy-summary-card strong{
font-size:12px !important;
}
#hxBuyPopup .hx-buy-paid-options{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}/* ==========================================================
HEREEXC BUY ORDER
COLOR MATCH — SWAP POPUP
LAYOUT UNTOUCHED
========================================================== */
/* ==========================================================
01. BUY POPUP CARD
SAME COLOR LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card{
background:
linear-gradient(
145deg,
#0B1B2D 0%,
#0D2239 55%,
#0A192A 100%
) !important;
border:
1px solid
rgba(37,99,235,.70) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
0 0 45px rgba(37,99,235,.14),
inset 0 1px 0
rgba(255,255,255,.04) !important;
color:#FFFFFF !important;
scrollbar-width:thin;
scrollbar-color:
#2563EB
#091321;
}
/* ==========================================================
02. BUY POPUP SCROLLBAR
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar{
width:6px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-track{
background:#091321;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb{
background:#2563EB;
border-radius:8px;
}
#hxBuyPopup .hx-buy-popup-card::-webkit-scrollbar-thumb:hover{
background:#3B82F6;
}
/* ==========================================================
03. BUY HEADER
SAME NAVY / BLUE LANGUAGE
========================================================== */
#hxBuyPopup .hx-buy-popup-header{
background:
linear-gradient(
180deg,
rgba(13,34,57,.98),
rgba(10,25,42,.96)
) !important;
border-bottom:
1px solid
rgba(76,200,255,.15) !important;
}
/* ==========================================================
04. BUY TITLE
========================================================== */
#hxBuyPopup .hx-buy-popup-brand h2{
color:#FFFFFF !important;
text-shadow:
0 0 14px
rgba(76,200,255,.10) !important;
}
/* ==========================================================
05. BUY LOGO
========================================================== */
#hxBuyPopup .hx-buy-popup-brand img{
filter:
drop-shadow(
0 0 8px
rgba(37,99,235,.30)
) !important;
}
/* ==========================================================
06. BUY CLOSE BUTTON
KEEP POSITION / ONLY CHANGE COLOR
========================================================== */
#hxBuyPopup .hx-buy-popup-x{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-popup-x:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
color:#FFFFFF !important;
}
/* ==========================================================
07. BUY SUMMARY CARDS
SAME AS SWAP SUMMARY
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
background:
linear-gradient(
145deg,
#122B45,
#10243A
) !important;
border:
1px solid
rgba(76,200,255,.22) !important;
}
/* ==========================================================
08. BUY SECTIONS
========================================================== */
#hxBuyPopup .hx-buy-popup-section{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
09. ADDRESS
========================================================== */
#hxBuyPopup .hx-buy-address-row{
background:#0B192B !important;
border:
1px solid
rgba(59,130,246,.24) !important;
}
#hxBuyPopup .hx-buy-address-row:focus-within{
border-color:
rgba(59,130,246,.70) !important;
box-shadow:
0 0 0 2px
rgba(37,99,235,.08),
0 0 18px
rgba(37,99,235,.10) !important;
}
/* ==========================================================
10. PAYMENT SELECT
========================================================== */
#hxBuyPopup .hx-buy-payment-select{
background:
linear-gradient(
180deg,
#0B2136,
#081A2B
) !important;
border:
1px solid
rgba(59,130,246,.35) !important;
}
#hxBuyPopup .hx-buy-payment-select:hover{
border-color:
rgba(59,130,246,.65) !important;
box-shadow:
0 0 16px
rgba(37,99,235,.10);
}
/* ==========================================================
11. PAYMENT MENU
========================================================== */
#hxBuyPopup .hx-buy-payment-menu{
background:
linear-gradient(
180deg,
#0B2136,
#071625
) !important;
border:
1px solid
rgba(59,130,246,.38) !important;
box-shadow:
0 22px 55px
rgba(0,0,0,.65),
0 0 25px
rgba(37,99,235,.10);
}
/* ==========================================================
12. STATUS
========================================================== */
#hxBuyPopup .hx-buy-status-card,
#hxBuyPopup .hx-buy-id-card{
background:
linear-gradient(
145deg,
#122B45,
#10253B
) !important;
border:
1px solid
rgba(76,200,255,.20) !important;
}
/* ==========================================================
13. WAITING ICON
BLUE — SAME LANGUAGE AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-status-icon{
border-color:
rgba(59,130,246,.18) !important;
border-top-color:
#3B82F6 !important;
}
/* READY CAN STILL USE BUY GREEN */
#hxBuyPopup .hx-buy-status-icon.is-ready{
border-color:
#25D366 !important;
}
/* ==========================================================
14. PAID WITH
========================================================== */
#hxBuyPopup .hx-buy-paid-section{
background:
rgba(8,25,42,.70) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
}
#hxBuyPopup .hx-buy-paid-option{
background:
linear-gradient(
145deg,
#122B45,
#102239
) !important;
border:
1px solid
rgba(76,200,255,.18) !important;
color:#FFFFFF !important;
}
#hxBuyPopup .hx-buy-paid-option:hover{
background:#1B3049 !important;
border-color:
rgba(59,130,246,.55) !important;
}
/* SELECTED PAYMENT REMAINS BUY GREEN */
#hxBuyPopup .hx-buy-paid-option.is-selected{
border-color:
#25D366 !important;
background:
rgba(37,211,102,.08) !important;
color:#25D366 !important;
}
/* ==========================================================
15. CANCEL
SAME AS SWAP
========================================================== */
#hxBuyPopup .hx-buy-cancel{
background:
linear-gradient(
145deg,
#172A40,
#122239
) !important;
border:
1px solid
rgba(113,136,165,.30) !important;
color:#C5D3E2 !important;
}
#hxBuyPopup .hx-buy-cancel:hover{
background:#1B3049 !important;
border-color:
rgba(143,170,200,.48) !important;
}
/* ==========================================================
16. CONFIRM
BUY GREEN REMAINS
========================================================== */
#hxBuyPopup .hx-buy-confirm{
background:
linear-gradient(
135deg,
#25D366,
#16A34A
) !important;
border:
1px solid
rgba(37,211,102,.65) !important;
color:#FFFFFF !important;
box-shadow:
0 7px 22px
rgba(37,211,102,.18) !important;
}
#hxBuyPopup .hx-buy-confirm:not(:disabled):hover{
background:
linear-gradient(
135deg,
#2EEA73,
#16A34A
) !important;
box-shadow:
0 10px 26px
rgba(37,211,102,.28) !important;
}/* ==========================================================
HEREEXC BUY ORDER
STEP 3 — PREMIUM 3D FLOAT HOVER
NO LAYOUT CHANGE
========================================================== */
/* ==========================================================
SUMMARY CARDS
========================================================== */
#hxBuyPopup .hx-buy-summary-card{
transform:translateY(0) translateZ(0);
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#hxBuyPopup .hx-buy-summary-card:hover{
transform:
translateY(-4px)
translateZ(8px);
border-color:
rgba(76,200,255,.52) !important;
background:
linear-gradient(
145deg,
rgba(20,53,82,.99),
rgba(10,30,50,.99)
) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(0,168,255,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}
/* YOU PAY — BUY GREEN HOVER */
#hxBuyPopup .hx-buy-summary-card:first-child:hover{
border-color:
rgba(37,211,102,.48) !important;
box-shadow:
0 14px 28px
rgba(0,0,0,.30),
0 0 22px
rgba(37,211,102,.10),
inset 0 1px 0
rgba(255,255,255,.06);
}/* ==========================================================
HEREEXC BUY ORDER
FIX — DANA & DOWNLOAD QR MUST BE CLICKABLE
========================================================== */
/* ==========================================================
DANA / DIGITAL WALLET
========================================================== */
#hxBuyPopup .hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* LINK DANA */
#hxBuyPopup a.hx-buy-send-fund{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
DOWNLOAD QR
========================================================== */
#hxBuyPopup .hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
#hxBuyPopup a.hx-buy-download{
cursor:pointer !important;
pointer-events:auto !important;
text-decoration:none !important;
}
/* ==========================================================
QR IMAGE / QR CONTAINER
========================================================== */
#hxBuyPopup .hx-buy-qris-image-wrap{
cursor:default !important;
pointer-events:auto !important;
}
/* ==========================================================
ONLY VISA / MASTERCARD = COMING SOON
========================================================== */
#hxBuyPopup .hx-buy-payment-option.is-coming-soon{
cursor:not-allowed !important;
pointer-events:none !important;
opacity:.48 !important;
filter:saturate(.65) !important;
}
/* ==========================================================
IMPORTANT:
DO NOT APPLY NOT-ALLOWED TO GENERIC ELEMENTS
========================================================== */
#hxBuyPopup .hx-buy-send-fund.is-coming-soon,
#hxBuyPopup .hx-buy-download.is-coming-soon{
cursor:pointer !important;
pointer-events:auto !important;
opacity:1 !important;
filter:none !important;
}
/* ================================================================
HEREEXC — FINAL BUY DROPDOWN HOTFIX
================================================================
PURPOSE:
- Fiat / Coin dropdown MUST NOT change layout height
- Dropdown MUST float above the next section
- Dropdown MUST stay anchored to its selector
- Restore correct stacking order after BUY ORDER styling
- No HTML / JS change
================================================================ */
/* ---------------------------------------------------------------
01. BUY CONTAINERS — ALLOW FLOATING DROPDOWNS
--------------------------------------------------------------- */
#buy,
#buy .hx-buy-card,
#buy .hx-buy-row,
#buy .hx-buy-left,
#buy .hx-buy-right,
#buy .hx-input-group{
position:relative !important;
overflow:visible !important;
}
/* ---------------------------------------------------------------
02. BUY INPUT ROW — ABOVE ACTION / PAYMENT AREA
--------------------------------------------------------------- */
#buy .hx-buy-row{
z-index:5000 !important;
}
#buy .hx-buy-left{
z-index:6000 !important;
}
#buy .hx-buy-right{
z-index:6000 !important;
}
/* ---------------------------------------------------------------
03. FIAT DROPDOWN
ANCHOR = FIAT INPUT GROUP
--------------------------------------------------------------- */
#buy #fiatList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #fiatList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
04. COIN DROPDOWN
ANCHOR = BTC / COIN SELECTOR AREA
--------------------------------------------------------------- */
#buy #coinList{
position:absolute !important;
top:calc(100% + 6px) !important;
bottom:auto !important;
left:0 !important;
right:auto !important;
transform:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:145px !important;
min-width:145px !important;
max-width:145px !important;
max-height:190px !important;
margin:0 !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
z-index:2147483000 !important;
}
#buy #coinList.active{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ---------------------------------------------------------------
05. ACTION AREA — ALWAYS UNDER DROPDOWNS
--------------------------------------------------------------- */
#buy .hx-action-panel,
#buy .hx-action-area,
#buy .hx-service-panel{
position:relative !important;
z-index:10 !important;
}
/* ---------------------------------------------------------------
06. INPUT CONTROLS — DO NOT CREATE NEW STACKING / CLIPPING
--------------------------------------------------------------- */
#buy .hx-input-group,
#buy .hx-input-prefix,
#buy .hx-coin-select{
overflow:visible !important;
}
/* ---------------------------------------------------------------
07. DROPDOWN ITEMS REMAIN CLICKABLE
--------------------------------------------------------------- */
#buy #fiatList *,
#buy #coinList *{
pointer-events:auto !important;
}
#buy #fiatList .hx-fiat-item,
#buy #coinList .hx-coin-item{
position:relative !important;
z-index:1 !important;
}
/* ---------------------------------------------------------------
08. PREMIUM HEREEXC SCROLLBAR
--------------------------------------------------------------- */
#buy #fiatList::-webkit-scrollbar,
#buy #coinList::-webkit-scrollbar{
width:5px !important;
}
#buy #fiatList::-webkit-scrollbar-track,
#buy #coinList::-webkit-scrollbar-track{
background:transparent !important;
}
#buy #fiatList::-webkit-scrollbar-thumb,
#buy #coinList::-webkit-scrollbar-thumb{
background:#168CFF !important;
border-radius:10px !important;
box-shadow:0 0 6px rgba(22,140,255,.22) !important;
}
#buy #fiatList::-webkit-scrollbar-thumb:hover,
#buy #coinList::-webkit-scrollbar-thumb:hover{
background:#4CC8FF !important;
}
/* ---------------------------------------------------------------
09. SAFETY — NEVER LET OPEN DROPDOWN PUSH THE PAGE
--------------------------------------------------------------- */
#buy #fiatList.active,
#buy #coinList.active{
height:auto !important;
min-height:0 !important;
}
/* END HEREEXC BUY DROPDOWN HOTFIX */
/* ==========================================================
HEREEXC FINAL RIGHT PANEL ORDER FIX
SPONSORED ABOVE MARKET CHART
No HTML / JS changes.
========================================================== */
/* Market Chart MUST stay directly below Sponsored. */
.hx-right-panel > #hxTransactionPanel{
order:2 !important;
flex:0 0 auto !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
position:relative !important;
z-index:10 !important;
}
/* ==========================================================
HEREEXC FIAT SELECTOR — FLAG + TICKER ALIGNMENT
========================================================== */
/* Bendera */
#buy #buyFiatButton img,
#buy #fiatList .hx-fiat-item img {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
display: block !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
HEREEXC MARKET SLOT — SLOT / ODOMETER PRICE ROLL
BTC + XMR remain static.
All columns after BTC/XMR roll vertically:
PRICE UP -> new number enters from below
PRICE DOWN -> new number enters from above
========================================================== */
.hx-market-slot .hx-price-value{
position:relative !important;
display:inline-block !important;
min-width:0 !important;
vertical-align:middle !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
.hx-market-slot .hx-slot-price-up{
animation:hxMarketPriceRollUp .52s cubic-bezier(.22,.72,.18,1) both !important;
}
.hx-market-slot .hx-slot-price-down{
animation:hxMarketPriceRollDown .52s cubic-bezier(.22,.72,.18,1) both !important;
}
/* Price rises: old value clears upward, replacement comes from below. */
@keyframes hxMarketPriceRollUp{
0%{
transform:translateY(100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Price falls: old value clears downward/upward slot direction
is represented by the replacement entering from the top. */
@keyframes hxMarketPriceRollDown{
0%{
transform:translateY(-100%);
opacity:.05;
filter:blur(1px);
}
45%{
opacity:.70;
}
100%{
transform:translateY(0);
opacity:1;
filter:blur(0);
}
}
/* Rotating ETH / DGB / SOL / selected coin headers. */
.hx-market-slot .hx-slot-coin-up{
display:inline-block !important;
animation:hxMarketCoinRoll .52s cubic-bezier(.22,.72,.18,1) both !important;
will-change:transform,opacity !important;
backface-visibility:hidden !important;
}
@keyframes hxMarketCoinRoll{
0%{
transform:translateY(100%);
opacity:.05;
}
55%{
opacity:.75;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.hx-market-slot .hx-slot-price-up,
.hx-market-slot .hx-slot-price-down,
.hx-market-slot .hx-slot-coin-up{
animation:none !important;
transform:none !important;
opacity:1 !important;
filter:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — VERTICAL REEL
IMPORTANT: card sizes, grid columns, gaps and typography
are inherited from the existing HEREEXC listing CSS.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
width:100% !important;
display:flex !important;
flex-direction:column !important;
transform:translate3d(0,0,0);
will-change:transform;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list{
width:100% !important;
flex:0 0 auto !important;
}
.hx-left-panel .hx-listing-vertical-track.hx-listing-vertical-moving{
transition:transform .82s cubic-bezier(.22,.75,.18,1) !important;
}
/* The duplicate grid is only the seamless continuation of the reel. */
.hx-left-panel .hx-listing-scroll-clone{
margin-top:0 !important;
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
transform:none !important;
transition:none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS — SLOW VERTICAL MARQUEE
Keep existing panel/card/logo dimensions unchanged.
Continuous upward movement; no rapid logo swapping.
========================================================== */
#hxNewListings,
.hx-new-listings,
.hx-new-listings-panel {
overflow: hidden !important;
}
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: hxNewListingsSlowMarquee 24s linear infinite !important;
will-change: transform !important;
}
@keyframes hxNewListingsSlowMarquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
#hxNewListings .hx-new-listings-grid,
.hx-new-listings .hx-new-listings-grid,
.hx-new-listings-panel .hx-new-listings-grid {
animation: none !important;
transform: none !important;
}
}
/* ==========================================================
HEREEXC NEW LISTINGS
FINAL 4-COLUMN PRECISION ALIGNMENT
========================================================== */
/* Area viewport marquee */
.hx-left-panel .hx-listing-vertical-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Track tetap mengikuti lebar panel */
.hx-left-panel .hx-listing-vertical-track {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ==========================================================
GRID
========================================================== */
.hx-left-panel .hx-listing-list {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
padding: 0 6px !important;
margin: 0 !important;
list-style: none !important;
}
/* ==========================================================
COIN CARD
========================================================== */
.hx-left-panel .hx-listing-list li {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 68px !important;
min-height: 68px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px !important;
margin: 0 !important;
overflow: hidden !important;
text-align: center !important;
}
/* ==========================================================
LOGO
========================================================== */
.hx-left-panel .hx-listing-list li img {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: 0 0 28px !important;
display: block !important;
margin: 0 auto !important;
padding: 3px !important;
box-sizing: border-box !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 50% !important;
}
/* ==========================================================
TICKER
========================================================== */
.hx-left-panel .hx-listing-list li span {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* Clone harus identik dengan grid asli */
.hx-left-panel .hx-listing-scroll-clone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}
/* ==========================================================
HEREEXC NEW LISTINGS — COINGECKO-STYLE UPWARD FEED
JavaScript requestAnimationFrame controls the movement.
No CSS marquee / no rapid swapping.
========================================================== */
.hx-left-panel .hx-listing-vertical-viewport{
position:relative !important;
overflow:hidden !important;
width:100% !important;
box-sizing:border-box !important;
}
.hx-left-panel .hx-listing-vertical-track{
display:flex !important;
flex-direction:column !important;
width:100% !important;
animation:none !important;
transition:none !important;
will-change:transform !important;
backface-visibility:hidden !important;
}
.hx-left-panel .hx-listing-vertical-track > .hx-listing-list,
.hx-left-panel .hx-listing-scroll-clone{
flex:0 0 auto !important;
width:100% !important;
margin-top:0 !important;
}
.hx-left-panel .hx-listing-scroll-clone{
pointer-events:none !important;
user-select:none !important;
}
@media(prefers-reduced-motion:reduce){
.hx-left-panel .hx-listing-vertical-track{
animation:none !important;
transition:none !important;
transform:none !important;
}
}
/* ==========================================================
NEW LISTINGS — LOGO CLONE SAFETY
Source and marquee clone use identical image dimensions.
========================================================== */
.hx-left-panel .hx-listing-list li img{
display:block !important;
object-fit:contain !important;
object-position:center !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN POPUP
FINAL PREMIUM EDITION
PREMIUM = NAVY + DIAMOND + GOLD ACCENT
SILVER = UNCHANGED
========================================================== */
/* =========================
POPUP OVERLAY
========================= */
#hxListingPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
box-sizing:border-box !important;
z-index:2147483647 !important;
background:rgba(1,7,18,.78) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
#hxListingPopup.open{
display:flex !important;
}
/* =========================
MAIN POPUP
========================= */
#hxListingPopup .hx-listing-popup-card{
position:relative !important;
width:780px !important;
max-width:calc(100vw - 24px) !important;
max-height:calc(100vh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
box-sizing:border-box !important;
padding:20px !important;
background:
linear-gradient(
145deg,
#061426 0%,
#071B31 48%,
#04101F 100%
) !important;
border:1px solid rgba(66,145,215,.38) !important;
border-radius:18px !important;
color:#FFFFFF !important;
box-shadow:
0 30px 90px rgba(0,0,0,.82),
0 0 50px rgba(0,110,220,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
HEADER
========================= */
#hxListingPopup .hx-listing-popup-header{
position:relative !important;
text-align:center !important;
padding:3px 44px 14px !important;
margin:0 0 15px !important;
border-bottom:1px solid rgba(100,160,210,.20) !important;
}
#hxListingPopup .hx-listing-brand{
font-size:25px !important;
font-weight:1000 !important;
letter-spacing:1.4px !important;
line-height:1 !important;
margin-bottom:7px !important;
}
#hxListingPopup .hx-listing-brand span{
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-brand strong{
color:#FFD166 !important;
}
#hxListingPopup #hxListingPopupTitle{
margin:0 !important;
color:#FFFFFF !important;
font-size:21px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
}
#hxListingPopup .hx-listing-popup-close{
position:absolute !important;
top:-2px !important;
right:0 !important;
width:32px !important;
height:32px !important;
border:1px solid rgba(130,180,220,.30) !important;
border-radius:9px !important;
background:#07182B !important;
color:#FFFFFF !important;
font-size:22px !important;
line-height:28px !important;
cursor:pointer !important;
transition:.18s ease !important;
}
#hxListingPopup .hx-listing-popup-close:hover{
background:#0C2744 !important;
border-color:#4AA9FF !important;
}
/* =========================
SECTION TITLES
========================= */
#hxListingPopup .hx-listing-section-title{
margin:0 0 9px !important;
color:#4DB7FF !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.9px !important;
}
/* =========================
FORM
========================= */
#hxListingPopup .hx-listing-form-section{
margin:0 0 14px !important;
}
#hxListingPopup .hx-listing-form-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
#hxListingPopup .hx-listing-field{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
min-width:0 !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-field > span{
color:rgba(220,235,250,.88) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
/* =========================
DARK NAVY INPUT
========================= */
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select,
#hxListingPopup .hx-listing-field textarea{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
border:1px solid rgba(79,142,196,.30) !important;
border-radius:9px !important;
background:
linear-gradient(
180deg,
#061727,
#04121F
) !important;
color:#F4FAFF !important;
outline:none !important;
font:inherit !important;
font-size:12px !important;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.35) !important;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease !important;
}
#hxListingPopup .hx-listing-field input,
#hxListingPopup .hx-listing-field select{
height:40px !important;
padding:0 11px !important;
}
#hxListingPopup .hx-listing-field textarea{
min-height:72px !important;
padding:9px 11px !important;
resize:vertical !important;
}
#hxListingPopup .hx-listing-field input:focus,
#hxListingPopup .hx-listing-field select:focus,
#hxListingPopup .hx-listing-field textarea:focus{
border-color:#2E9BFF !important;
background:#061A2E !important;
box-shadow:
0 0 0 2px rgba(46,155,255,.10),
0 0 14px rgba(46,155,255,.08),
inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#hxListingPopup .hx-listing-field input::placeholder,
#hxListingPopup .hx-listing-field textarea::placeholder{
color:rgba(190,210,230,.42) !important;
}
#hxListingPopup .hx-listing-field select option{
background:#061727 !important;
color:#FFFFFF !important;
}
/* ==========================================================
PACKAGE GRID
========================================================== */
#hxListingPopup .hx-listing-package-section{
margin:0 0 13px !important;
}
#hxListingPopup .hx-listing-package-grid{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
/* =========================
PACKAGE BASE
========================= */
#hxListingPopup .hx-listing-package{
position:relative !important;
min-width:0 !important;
min-height:145px !important;
padding:13px 10px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
box-sizing:border-box !important;
border-radius:12px !important;
color:#FFFFFF !important;
cursor:pointer !important;
overflow:hidden !important;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease,
border-color .18s ease !important;
}
#hxListingPopup .hx-listing-package:hover{
transform:translateY(-2px) !important;
filter:brightness(1.06) !important;
}
/* ==========================================================
GOLD PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package-gold{
background:
linear-gradient(
145deg,
#6F4B0D 0%,
#B98A18 48%,
#7A5410 100%
) !important;
border:1px solid #E7C65B !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 8px 22px rgba(0,0,0,.25),
0 0 15px rgba(212,175,55,.08) !important;
}
/* ==========================================================
SILVER PACKAGE
TETAP SILVER
========================================================== */
#hxListingPopup .hx-listing-package-silver{
background:
linear-gradient(
145deg,
#535D68 0%,
#AEB6BE 48%,
#626D78 100%
) !important;
border:1px solid #DDE3E8 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 8px 22px rgba(0,0,0,.25) !important;
}
/* ==========================================================
PREMIUM
NAVY + DIAMOND
ORANGE DIHILANGKAN
GOLD HANYA SEBAGAI ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium{
background:
linear-gradient(
145deg,
#041328 0%,
#08284A 48%,
#061A34 100%
) !important;
border:1px solid #D9B84F !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 25px rgba(0,0,0,.32),
0 0 18px rgba(217,184,79,.12) !important;
}
/* Premium GOLD highlight */
#hxListingPopup .hx-listing-package-premium::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(
135deg,
rgba(255,215,90,.08),
transparent 32%,
transparent 68%,
rgba(255,215,90,.05)
) !important;
}
/* Premium diamond */
#hxListingPopup .hx-listing-package-premium::after{
content:"◆" !important;
position:absolute !important;
top:9px !important;
right:11px !important;
color:#F4D36A !important;
font-size:18px !important;
text-shadow:
0 0 6px rgba(244,211,106,.75),
0 0 14px rgba(244,211,106,.28) !important;
}
/* ==========================================================
PACKAGE TEXT
========================================================== */
#hxListingPopup .hx-package-name{
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.8px !important;
}
#hxListingPopup .hx-package-price{
font-size:21px !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#hxListingPopup .hx-package-note{
font-size:8px !important;
font-weight:900 !important;
opacity:.95 !important;
text-align:center !important;
}
#hxListingPopup .hx-package-arrow{
margin-top:3px !important;
font-size:9px !important;
}
/* ==========================================================
PREMIUM GOLD TEXT ACCENT
========================================================== */
#hxListingPopup .hx-listing-package-premium .hx-package-name,
#hxListingPopup .hx-listing-package-premium .hx-package-price{
color:#F4D36A !important;
text-shadow:
0 0 8px rgba(244,211,106,.16) !important;
}
/* ==========================================================
PACKAGE DETAILS
========================================================== */
#hxListingPopup .hx-package-details{
display:none !important;
width:100% !important;
margin-top:5px !important;
padding-top:6px !important;
border-top:
1px solid rgba(255,255,255,.20) !important;
text-align:left !important;
}
#hxListingPopup .hx-listing-package.is-expanded{
min-height:160px !important;
}
#hxListingPopup
.hx-listing-package.is-expanded
.hx-package-details{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
#hxListingPopup .hx-package-details span{
font-size:8px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
/* ==========================================================
SELECTED PACKAGE
========================================================== */
#hxListingPopup .hx-listing-package.is-selected{
transform:translateY(-2px) !important;
box-shadow:
0 0 0 2px #D9B84F,
0 12px 28px rgba(0,0,0,.38),
0 0 18px rgba(217,184,79,.16),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Premium selected = gold outline + navy interior */
#hxListingPopup
.hx-listing-package-premium.is-selected{
border-color:#F4D36A !important;
box-shadow:
0 0 0 2px #F4D36A,
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(244,211,106,.18),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* ==========================================================
SELECTED PACKAGE BAR
========================================================== */
#hxListingPopup .hx-listing-selected-package{
margin-top:8px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(71,139,197,.30) !important;
border-radius:9px !important;
background:#061827 !important;
color:rgba(225,240,255,.82) !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:.45px !important;
}
/* ==========================================================
AGREEMENT
========================================================== */
#hxListingPopup .hx-listing-agreement{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:0 0 11px !important;
color:rgba(220,235,250,.82) !important;
font-size:9px !important;
line-height:1.45 !important;
cursor:pointer !important;
}
#hxListingPopup .hx-listing-agreement input{
margin:2px 0 0 !important;
accent-color:#D9B84F !important;
}
/* ==========================================================
ACTION BUTTONS
========================================================== */
#hxListingPopup .hx-listing-popup-actions{
display:grid !important;
grid-template-columns:1fr 2fr !important;
gap:9px !important;
}
#hxListingPopup .hx-listing-cancel,
#hxListingPopup .hx-listing-submit{
min-height:46px !important;
border-radius:10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.45px !important;
cursor:pointer !important;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
filter .18s ease !important;
}
/* CLOSE */
#hxListingPopup .hx-listing-cancel{
border:1px solid rgba(100,150,190,.28) !important;
background:#061827 !important;
color:#FFFFFF !important;
}
#hxListingPopup .hx-listing-cancel:hover{
border-color:#4CA9FF !important;
background:#0A2138 !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
SUBMIT — GOLD
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-gold{
background:
linear-gradient(
135deg,
#8B6518,
#D0A82F,
#8A6418
) !important;
border-color:#E8CB65 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(180,135,35,.22) !important;
}
/* ==========================================================
SUBMIT — SILVER
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-silver{
background:
linear-gradient(
135deg,
#505B66,
#A8B1B9,
#59636D
) !important;
border-color:#D5DCE2 !important;
color:#FFFFFF !important;
box-shadow:
0 8px 22px rgba(155,170,185,.18) !important;
}
/* ==========================================================
SUBMIT — PREMIUM
NAVY + GOLD ACCENT
========================================================== */
#hxListingPopup .hx-listing-submit.hx-submit-premium{
background:
linear-gradient(
135deg,
#06162C,
#0A3970,
#06162C
) !important;
border-color:#E4C45C !important;
color:#FFFFFF !important;
box-shadow:
0 8px 24px rgba(0,110,220,.25),
0 0 18px rgba(228,196,92,.10) !important;
}
/* Hover all submit */
#hxListingPopup .hx-listing-submit.hx-submit-gold:hover,
#hxListingPopup .hx-listing-submit.hx-submit-silver:hover,
#hxListingPopup .hx-listing-submit.hx-submit-premium:hover{
filter:brightness(1.08) !important;
transform:translateY(-1px) !important;
}
/* ==========================================================
NATIVE COIN — HIDDEN CONTRACT FIELD
JS controls display:none.
This CSS prevents empty space when hidden.
========================================================== */
#hxListingContractField[style*="display: none"]{
display:none !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar{
width:7px !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-track{
background:#030C17 !important;
}
#hxListingPopup .hx-listing-popup-card::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#1C4F78,
#D9B84F
) !important;
border-radius:10px !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:720px){
#hxListingPopup{
padding:7px !important;
}
#hxListingPopup .hx-listing-popup-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 14px) !important;
padding:14px !important;
border-radius:15px !important;
}
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#hxListingPopup .hx-listing-field-full{
grid-column:1 / -1 !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
}
#hxListingPopup .hx-listing-package{
padding:11px 7px !important;
min-height:130px !important;
}
#hxListingPopup .hx-package-name{
font-size:11px !important;
}
#hxListingPopup .hx-package-price{
font-size:17px !important;
}
}
@media(max-width:480px){
#hxListingPopup .hx-listing-form-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package-grid{
grid-template-columns:1fr !important;
}
#hxListingPopup .hx-listing-package{
min-height:110px !important;
}
#hxListingPopup .hx-listing-popup-actions{
grid-template-columns:1fr !important;
}
}/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* HEREEXC LIST YOUR COIN — PREMIUM FINAL BORDER
Premium card remains NAVY + DIAMOND.
Border is BLUE/NAVY, never orange.
*/
#hxListingPopup .hx-listing-package-premium,
#hxListingPopup .hx-listing-package-premium:hover,
.hx-listing-package-premium,
.hx-listing-package-premium:hover {
border: 1px solid #2B8CFF !important;
border-color: #2B8CFF !important;
}
#hxListingPopup .hx-listing-package-premium.is-selected,
.hx-listing-package-premium.is-selected {
border: 2px solid #2B8CFF !important;
border-color: #2B8CFF !important;
box-shadow:
0 0 0 1px rgba(43,140,255,.45),
0 12px 28px rgba(0,0,0,.40),
0 0 22px rgba(43,140,255,.24),
inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN — FINAL POPUP CLEANUP
Hide the WordPress Contact Form UI inside the listing popup.
The form remains in the DOM for JS/backend submission.
========================================================== */
#hxListingPopup .hx-listing-wpform,
#hxListingPopup #hxListingWPForm,
#hxListingPopup .hx-listing-shortcode,
#hxListingPopup .hx-listing-shortcode form,
#hxListingPopup form[data-contact-form-id="7827"],
#hxListingPopup form[id*="contact-form-7827"],
#hxListingPopup .contact-form-7827 {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Also hide the application heading/summary wrapper if a theme
re-renders the shortcode outside its original section. */
#hxListingPopup .hx-listing-section-title,
#hxListingPopup .hx-listing-selected-summary {
/* keep normal section titles except the hidden application block */
}
#hxListingPopup #hxListingWPForm .hx-listing-section-title,
#hxListingPopup #hxListingWPForm .hx-listing-selected-summary {
display: none !important;
}/* ==========================================================
HEREEXC — LIST YOUR COIN
BLUE DIAMOND BUTTON
HTML: LIST YOUR COIN
========================================================== */
.hx-left-panel .hx-widget-link{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:calc(100% - 12px) !important;
min-height:44px !important;
margin:8px 6px 0 !important;
padding:10px 14px !important;
box-sizing:border-box !important;
border:1px solid #168BFF !important;
border-radius:11px !important;
background:
linear-gradient(
135deg,
#06182C 0%,
#073D70 50%,
#06182C 100%
) !important;
color:#55BEFF !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.6px !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:
0 0 8px rgba(72,185,255,.45) !important;
box-shadow:
0 0 0 1px rgba(0,130,255,.10),
0 5px 18px rgba(0,90,180,.22),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow:hidden !important;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease !important;
}
/* DIAMOND */
.hx-left-panel .hx-widget-link::before{
content:"◆" !important;
display:inline-block !important;
margin-right:9px !important;
color:#58C7FF !important;
font-size:14px !important;
line-height:1 !important;
text-shadow:
0 0 5px #168BFF,
0 0 12px rgba(50,180,255,.80) !important;
}
/* BLUE DIAMOND SHINE */
.hx-left-panel .hx-widget-link::after{
content:"" !important;
position:absolute !important;
top:0 !important;
left:-120% !important;
width:65% !important;
height:100% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
) !important;
transform:skewX(-20deg) !important;
transition:left .55s ease !important;
pointer-events:none !important;
}
/* HOVER */
.hx-left-panel .hx-widget-link:hover{
transform:translateY(-1px) !important;
border-color:#58C7FF !important;
background:
linear-gradient(
135deg,
#082340 0%,
#075A9E 50%,
#082340 100%
) !important;
color:#8EDCFF !important;
box-shadow:
0 0 0 1px rgba(65,180,255,.20),
0 7px 24px rgba(0,126,255,.30),
0 0 18px rgba(0,160,255,.18),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* DIAMOND HOVER */
.hx-left-panel .hx-widget-link:hover::before{
color:#8EDCFF !important;
text-shadow:
0 0 6px #168BFF,
0 0 15px rgba(70,195,255,.95) !important;
}
/* SHINE HOVER */
.hx-left-panel .hx-widget-link:hover::after{
left:140% !important;
}
/* CLICK */
.hx-left-panel .hx-widget-link:active{
transform:translateY(1px) !important;
box-shadow:
0 0 10px rgba(0,126,255,.25),
inset 0 2px 5px rgba(0,0,0,.30) !important;
}
/* ==========================================================
HEREEXC LIST YOUR COIN POPUP — CLOSE BUTTON FIX
========================================================== */
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
position:absolute !important;
top:14px !important;
right:14px !important;
width:42px !important;
height:36px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
border:1px solid rgba(73,145,205,.38) !important;
border-radius:9px !important;
background:#071A2E !important;
color:#EAF6FF !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1 !important;
cursor:pointer !important;
z-index:20 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 3px 12px rgba(0,0,0,.25) !important;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease !important;
}
/* Hover */
#hxListingPopup .hx-listing-popup-close:hover,
.hx-listing-popup-close:hover {
background:#0A2B4A !important;
border-color:#39AFFF !important;
color:#6CCBFF !important;
box-shadow:
0 0 12px rgba(30,150,255,.22),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Pastikan header menjadi anchor untuk tombol close */
#hxListingPopup .hx-listing-popup-header {
position:relative !important;
min-height:48px !important;
box-sizing:border-box !important;
padding-right:65px !important;
}
/* Jangan sampai popup memotong tombol */
#hxListingPopup .hx-listing-popup-card {
position:relative !important;
overflow-x:hidden !important;
}
/* Mobile */
@media(max-width:600px){
#hxListingPopup .hx-listing-popup-close,
.hx-listing-popup-close {
top:10px !important;
right:10px !important;
width:38px !important;
height:34px !important;
font-size:20px !important;
}
}
/* ==========================================================
HEREEXC WALLET — IMPORT ONLY / RESTORE NOTICE
========================================================== */
.hx-wallet-import-modal{
position:fixed !important;
inset:0 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
background:rgba(0,0,0,.72) !important;
z-index:2147483000 !important;
}
.hx-wallet-import-modal.is-open{
display:flex !important;
}
.hx-wallet-import-card{
width:min(520px,100%) !important;
box-sizing:border-box !important;
padding:24px !important;
border:1px solid rgba(80,140,255,.35) !important;
border-radius:18px !important;
background:#07142f !important;
box-shadow:0 20px 70px rgba(0,0,0,.55) !important;
}
.hx-wallet-import-header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
margin-bottom:18px !important;
}
.hx-wallet-import-header h2{
margin:0 !important;
}
#hxWalletImportClose{
border:0 !important;
background:transparent !important;
font-size:28px !important;
cursor:pointer !important;
}
#hxWalletImportMnemonic,
#hxWalletImportPassword{
width:100% !important;
box-sizing:border-box !important;
margin:7px 0 15px !important;
}
#hxWalletImportSubmit{
width:100% !important;
min-height:44px !important;
cursor:pointer !important;
}
.hx-wallet-import-status{
min-height:22px !important;
margin:4px 0 12px !important;
font-size:13px !important;
}
.hx-wallet-import-note{
margin-top:14px !important;
font-size:12px !important;
opacity:.72 !important;
line-height:1.5 !important;
}
.hx-wallet-restore-notice{
position:fixed !important;
left:50% !important;
bottom:24px !important;
transform:translateX(-50%) !important;
width:min(620px,calc(100% - 32px)) !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
padding:14px 16px !important;
border:1px solid rgba(255,180,60,.4) !important;
border-radius:14px !important;
background:#07142f !important;
box-shadow:0 15px 45px rgba(0,0,0,.5) !important;
z-index:2147482999 !important;
}
.hx-wallet-restore-notice span{
flex:1 1 320px !important;
font-size:13px !important;
line-height:1.45 !important;
}
#hxWalletRestoreImport{
min-height:36px !important;
padding:8px 14px !important;
cursor:pointer !important;
}
/* ==========================================================
HEREEXC WALLET — CREATE WALLET REMOVED
Import-only wallet. Legacy/cached Create Wallet UI is hidden.
========================================================== */
#hxWalletCreateInline,
#hxCreateWallet,
#hxCreateWalletButton,
#hxWalletCreate,
#hxWalletCreateButton,
[data-hx-create-wallet]{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* ==========================================================
HEREEXC WALLET — RESTORE NOTICE VISIBILITY FIX
hidden=true must remove the footer notice after import.
========================================================== */
.hx-wallet-restore-notice[hidden]{
display:none !important;
}
#hxSwapOrderDropdown{
display:block !important;
opacity:1 !important;
visibility:visible !important;
}.hx-order-bar{
display:flex;
gap:10px;
width:100%;
}
.hx-order-control{
flex:1;
}.hx-active-swap-order{
margin-top:12px;
padding:16px;
background:#071b33;
border:1px solid #006edc;
border-radius:14px;
}
.hx-active-swap-header{
font-weight:800;
margin-bottom:12px;
}
.hx-swap-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.hx-swap-row span{
font-size:12px;
opacity:.7;
}
/* ==========================================================
HEREEXC I HAVE SENT - NAVY DIAMOND CHECKBOX
========================================================== */
.hx-i-have-sent{
display:flex;
align-items:center;
justify-content:center;
margin:10px 0;
}
.hx-i-have-sent label{
display:flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:linear-gradient(135deg,#061426,#102a4a);
border:1px solid #00A8FF;
border-radius:12px;
color:#fff;
font-weight:700;
cursor:pointer;
box-shadow:0 0 12px rgba(0,168,255,.35);
}
.hx-i-have-sent input{
appearance:none;
width:18px;
height:18px;
border-radius:4px;
border:1px solid #4CC8FF;
background:#020b18;
position:relative;
}
.hx-i-have-sent input:checked{
background:linear-gradient(135deg,#00A8FF,#D946EF);
box-shadow:0 0 12px #D946EF;
}
.hx-i-have-sent input:checked::after{
content:"✓";
position:absolute;
color:#fff;
left:3px;
top:-2px;
font-size:15px;
font-weight:900;
}
/* ==========================================================
HEREEXC I HAVE SENT - NAVY DIAMOND FOOTER
========================================================== */
.hx-i-have-sent{
display:none;
align-items:center;
justify-content:flex-start;
}
.hx-i-have-sent label{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
background:linear-gradient(135deg,#061426,#102a4a);
border:1px solid #00A8FF;
border-radius:12px;
color:#fff;
font-weight:700;
cursor:pointer;
box-shadow:0 0 10px rgba(0,168,255,.35);
}
.hx-i-have-sent input{
appearance:none;
width:18px;
height:18px;
border-radius:4px;
border:1px solid #4CC8FF;
background:#020b18;
position:relative;
}
.hx-i-have-sent input:checked{
background:linear-gradient(135deg,#00A8FF,#D946EF);
box-shadow:0 0 12px #D946EF;
}
.hx-i-have-sent input:checked::after{
content:"✓";
position:absolute;
color:#fff;
left:3px;
top:-2px;
font-weight:800;
}
/* ==========================================================
HEREEXC — MOBILE LAYOUT RESET
FINAL MOBILE BLUEPRINT
Header → Main Panel
BUY / SELL / SWAP keep DESKTOP HORIZONTAL STRUCTURE
No mobile stacking inside the exchange panels.
========================================================== */
@media (max-width:900px){
/* ----------------------------------------------------------
01. HEADER — ALWAYS FIRST / TOP
---------------------------------------------------------- */
.hx-header{
width:calc(100% - 20px) !important;
max-width:none !important;
margin:0 auto !important;
transform:none !important;
position:relative !important;
left:auto !important;
right:auto !important;
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
min-height:120px !important;
box-sizing:border-box !important;
}
/* ----------------------------------------------------------
02. MAIN — HEADER FIRST, MAIN SECOND
Center exchange panel stays first inside main.
Side panels follow underneath.
---------------------------------------------------------- */
.hx-main{
width:calc(100% - 20px) !important;
max-width:none !important;
margin:12px auto 0 !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
max-width:none !important;
}
.hx-left-panel{
order:2 !important;
width:100% !important;
}
.hx-right-panel{
order:3 !important;
width:100% !important;
}
/* ----------------------------------------------------------
03. BUY / SELL / SWAP TABS
Always three horizontal tabs.
---------------------------------------------------------- */
.hx-tabs,
.hx-service-tabs{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
.hx-tab{
width:100% !important;
min-width:0 !important;
white-space:nowrap !important;
}
/* ----------------------------------------------------------
04. BUY — KEEP DESKTOP ROW
YOU PAY | FOR
---------------------------------------------------------- */
#buy .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 160px !important;
gap:14px !important;
align-items:center !important;
}
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100% !important;
min-width:0 !important;
}
/* ----------------------------------------------------------
05. BUY — KEEP DESKTOP ACTION AREA
BUY NOW | 2 × 2 PAYMENT GRID
---------------------------------------------------------- */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:145px minmax(0,1fr) !important;
gap:10px !important;
align-items:stretch !important;
}
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button{
width:100% !important;
height:106px !important;
min-height:106px !important;
white-space:nowrap !important;
}
#buy .hx-service-panel{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
}
#buy .hx-service-card,
#buy .hx-payment-button,
#buy .hx-payment-option{
min-width:0 !important;
white-space:nowrap !important;
}
/* ----------------------------------------------------------
06. BUY — RATE CARDS NEVER BECOME A COLUMN
---------------------------------------------------------- */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
#buy .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
}
/* ----------------------------------------------------------
07. SELL — KEEP DESKTOP ROW
YOU SELL | SELLING FOR
---------------------------------------------------------- */
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 170px !important;
gap:14px !important;
align-items:center !important;
}
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
}
/* SELL RATE CARDS — 3 ACROSS */
#sell .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:90px !important;
min-height:90px !important;
}
/* SELL ACTION — BUTTON + 2 × 2 SERVICES */
#sell .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:145px minmax(0,1fr) !important;
gap:10px !important;
align-items:stretch !important;
}
#sell #sellNowButton{
width:100% !important;
height:106px !important;
min-height:106px !important;
white-space:nowrap !important;
}
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
}
#sell .hx-action-panel .hx-service-card{
min-width:0 !important;
white-space:nowrap !important;
}
/* ----------------------------------------------------------
08. SWAP — KEEP DESKTOP TWO-COLUMN STRUCTURE
---------------------------------------------------------- */
.hx-swap-top-layout{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:14px !important;
align-items:start !important;
}
.hx-swap-order-column{
width:100% !important;
min-width:0 !important;
}
.hx-swap-field-card,
.hx-swap-order-card{
width:100% !important;
min-width:0 !important;
}
/* Swap fields stay horizontal and never collapse into a stack. */
.hx-swap-field-card .hx-input-group{
width:100% !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
}
.hx-swap-field-card .hx-input-prefix{
flex:0 0 auto !important;
min-width:82px !important;
}
.hx-swap-field-card .hx-buy-amount{
flex:1 1 auto !important;
min-width:0 !important;
width:auto !important;
}
/* Swap direction/switch remains in the desktop position. */
.hx-swap-switch{
width:auto !important;
min-width:36px !important;
height:36px !important;
}
.hx-swap-direction{
width:32px !important;
height:32px !important;
flex:0 0 32px !important;
}
/* ----------------------------------------------------------
09. PREVENT ANY MAIN PANEL ELEMENT FROM BECOMING
A FULL-WIDTH VERTICAL BUTTON STACK
---------------------------------------------------------- */
#buy button,
#sell button,
#swap button{
box-sizing:border-box !important;
}
#buy .hx-payment-grid,
#sell .hx-payment-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
/* ----------------------------------------------------------
10. FOOTER / OTHER SITE AREAS
---------------------------------------------------------- */
.hx-market-slot-section,
.hx-running-market-section,
.hx-footer{
width:calc(100% - 20px) !important;
max-width:none !important;
}
}
/* --------------------------------------------------------------
VERY SMALL PHONES
Keep the same desktop composition.
Only reduce spacing/font size — NEVER change grid to 1 column.
-------------------------------------------------------------- */
@media (max-width:420px){
.hx-header{
width:calc(100% - 12px) !important;
padding:10px !important;
}
.hx-main{
width:calc(100% - 12px) !important;
}
.hx-tabs{
gap:4px !important;
padding:4px !important;
}
.hx-tab{
padding:0 5px !important;
font-size:11px !important;
}
#buy .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:minmax(0,1fr) 135px !important;
gap:8px !important;
}
#buy .hx-action-panel,
#sell .hx-action-panel{
grid-template-columns:120px minmax(0,1fr) !important;
gap:7px !important;
}
#buy .hx-rate-options,
#sell .hx-rate-options{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:5px !important;
}
#buy .hx-rate-options .hx-rate-card,
#sell .hx-rate-options .hx-rate-card{
height:84px !important;
min-height:84px !important;
padding:7px !important;
}
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button,
#sell #sellNowButton{
height:96px !important;
min-height:96px !important;
font-size:13px !important;
}
#buy .hx-service-panel,
#sell .hx-action-panel .hx-service-panel{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:5px !important;
}
.hx-swap-top-layout{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:8px !important;
}
}
/* ==========================================================
HEREEXC — FINAL PHONE LAYOUT
HEADER → MAIN PANEL
BUY / SELL / SWAP = DESKTOP COMPOSITION, COMPACTED
IMPORTANT:
Listing coins, sponsor and market chart are NOT modified here.
========================================================== */
@media (max-width:900px){
/* ======================================================
01. HEADER — ALWAYS AT THE VERY TOP
====================================================== */
.hx-header{
width:calc(100% - 12px) !important;
max-width:none !important;
margin:0 auto !important;
transform:none !important;
left:auto !important;
right:auto !important;
position:relative !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
align-items:center !important;
box-sizing:border-box !important;
min-height:100px !important;
padding:10px 8px !important;
}
/* ======================================================
02. MAIN — FULL PHONE WIDTH
Center/main exchange panel remains first.
Existing listing + market order is preserved.
====================================================== */
.hx-main{
width:calc(100% - 12px) !important;
max-width:none !important;
margin:8px auto 0 !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
overflow:visible !important;
}
.hx-main-grid-parent{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
overflow:visible !important;
}
.hx-center-panel{
order:1 !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
overflow:visible !important;
}
/* Keep existing left/right panel order and behavior. */
.hx-left-panel{ order:2 !important; }
.hx-right-panel{ order:3 !important; }
/* ======================================================
03. BUY / SELL / SWAP TABS
Always 3 columns.
====================================================== */
.hx-tabs{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:4px !important;
box-sizing:border-box !important;
}
.hx-tabs .hx-tab,
.hx-tabs button{
min-width:0 !important;
width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:clip !important;
padding-left:4px !important;
padding-right:4px !important;
}
/* ======================================================
04. BUY
YOU PAY | FOR — NEVER STACK
====================================================== */
#buy .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 140px !important;
gap:8px !important;
align-items:end !important;
overflow:visible !important;
}
#buy .hx-buy-left,
#buy .hx-buy-right{
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
#buy .hx-buy-left .hx-input-group,
#buy .hx-buy-right .hx-coin-select{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
/* Prevent internal selector contents from forcing width. */
#buy .hx-buy-row .hx-input-prefix,
#buy .hx-buy-row .hx-selector,
#buy .hx-buy-row .hx-selector-button{
min-width:0 !important;
max-width:100% !important;
}
#buy .hx-buy-row input{
min-width:0 !important;
max-width:100% !important;
}
/* ======================================================
05. BUY ACTION
BUY NOW | 2 × 2 PAYMENT CARDS
====================================================== */
#buy .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:118px minmax(0,1fr) !important;
grid-template-rows:96px !important;
gap:8px !important;
align-items:stretch !important;
overflow:visible !important;
}
#buy .hx-action-panel .hx-primary-button{
width:100% !important;
height:96px !important;
min-height:96px !important;
font-size:13px !important;
white-space:nowrap !important;
box-sizing:border-box !important;
}
#buy .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
padding:0 6px !important;
gap:5px !important;
font-size:8px !important;
overflow:hidden !important;
}
#buy .hx-action-panel .hx-service-card img{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
}
/* ======================================================
06. SELL
Same compact horizontal blueprint as BUY.
====================================================== */
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 140px !important;
gap:8px !important;
align-items:end !important;
overflow:visible !important;
}
#sell .hx-buy-left,
#sell .hx-buy-right{
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
#sell .hx-buy-row .hx-input-group,
#sell .hx-buy-row .hx-coin-select,
#sell .hx-buy-row .hx-selector,
#sell .hx-buy-row .hx-selector-button{
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
#sell .hx-buy-row input{
min-width:0 !important;
max-width:100% !important;
}
#sell .hx-action-panel{
width:100% !important;
display:grid !important;
grid-template-columns:118px minmax(0,1fr) !important;
grid-template-rows:96px !important;
gap:8px !important;
align-items:stretch !important;
}
#sell #sellNowButton,
#sell .hx-action-panel .hx-primary-button{
width:100% !important;
height:96px !important;
min-height:96px !important;
font-size:13px !important;
white-space:nowrap !important;
}
#sell .hx-action-panel .hx-service-panel{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-action-panel .hx-service-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
padding:0 6px !important;
font-size:8px !important;
overflow:hidden !important;
}
/* ======================================================
07. SELL RATE CARDS
Keep 3 cards across.
====================================================== */
#sell .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#sell .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:84px !important;
min-height:84px !important;
padding:7px !important;
}
/* ======================================================
08. BUY RATE CARDS
Keep 3 cards across.
====================================================== */
#buy .hx-rate-options{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
#buy .hx-rate-options .hx-rate-card{
width:100% !important;
min-width:0 !important;
height:84px !important;
min-height:84px !important;
padding:7px !important;
}
/* ======================================================
09. SWAP
Same desktop composition: LEFT | RIGHT.
Never collapse to one column.
====================================================== */
.hx-swap-top-layout{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:8px !important;
align-items:stretch !important;
}
.hx-swap-converter-column,
.hx-swap-order-column{
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
.hx-swap-field-card,
.hx-swap-order-card{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.hx-swap-field-card{
padding:9px !important;
}
.hx-swap-field-card .hx-input-group{
width:100% !important;
min-width:0 !important;
min-height:52px !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
overflow:visible !important;
}
.hx-swap-field-card .hx-input-prefix{
min-width:68px !important;
width:auto !important;
height:50px !important;
padding:0 7px !important;
gap:5px !important;
font-size:10px !important;
}
.hx-swap-field-card .hx-buy-amount{
min-width:0 !important;
width:auto !important;
flex:1 1 auto !important;
font-size:15px !important;
}
.hx-swap-field-card .hx-selector-logo{
width:20px !important;
height:20px !important;
}
.hx-swap-switch{
height:32px !important;
min-width:32px !important;
}
.hx-swap-direction{
width:30px !important;
height:30px !important;
flex:0 0 30px !important;
}
/* ======================================================
10. BUY ORDER / SELL ORDER
Keep two buttons on one row.
====================================================== */
#buy .hx-order-buttons,
#sell .hx-order-buttons{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
#buy .hx-order-buttons > *,
#sell .hx-order-buttons > *{
min-width:0 !important;
width:100% !important;
}
/* ======================================================
11. WALLET BAR
BALANCE | ALL | HISTORY | WALLET
Four items always visible in one row.
====================================================== */
.hx-wallet-row{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:4px !important;
align-items:stretch !important;
overflow:visible !important;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu{
width:100% !important;
min-width:0 !important;
max-width:none !important;
flex:none !important;
box-sizing:border-box !important;
}
.hx-wallet-balance{
height:42px !important;
padding:0 5px !important;
gap:3px !important;
justify-content:center !important;
overflow:hidden !important;
}
.hx-wallet-balance span{
font-size:7px !important;
letter-spacing:.5px !important;
}
.hx-wallet-balance strong{
font-size:9px !important;
max-width:100% !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.hx-wallet-select,
.hx-history-button{
height:42px !important;
padding:0 4px !important;
font-size:8px !important;
white-space:nowrap !important;
overflow:hidden !important;
}
.hx-wallet-menu{
height:42px !important;
}
.hx-wallet-button{
width:100% !important;
min-width:0 !important;
height:42px !important;
padding:0 4px !important;
font-size:8px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}
/* ==========================================================
VERY SMALL PHONE — ONLY COMPACT SIZE, NEVER STACK
========================================================== */
@media (max-width:420px){
.hx-header{
width:calc(100% - 8px) !important;
min-height:92px !important;
padding:8px 5px !important;
}
.hx-main{
width:calc(100% - 8px) !important;
margin-top:6px !important;
}
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:minmax(0,1fr) 128px !important;
gap:6px !important;
}
#buy .hx-action-panel,
#sell .hx-action-panel{
grid-template-columns:108px minmax(0,1fr) !important;
grid-template-rows:88px !important;
gap:6px !important;
}
#buy .hx-action-panel .hx-primary-button,
#sell #sellNowButton,
#sell .hx-action-panel .hx-primary-button{
height:88px !important;
min-height:88px !important;
font-size:12px !important;
}
#buy .hx-action-panel .hx-service-panel,
#sell .hx-action-panel .hx-service-panel{
gap:5px !important;
}
#buy .hx-action-panel .hx-service-card,
#sell .hx-action-panel .hx-service-card{
padding:0 4px !important;
font-size:7px !important;
}
#buy .hx-action-panel .hx-service-card img,
#sell .hx-action-panel .hx-service-card img{
width:18px !important;
height:18px !important;
flex-basis:18px !important;
}
.hx-swap-top-layout{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:6px !important;
}
.hx-swap-field-card{
padding:7px !important;
}
.hx-swap-field-card .hx-input-prefix{
min-width:58px !important;
padding:0 5px !important;
font-size:9px !important;
}
.hx-swap-field-card .hx-buy-amount{
font-size:13px !important;
}
.hx-wallet-row{
gap:3px !important;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button{
height:40px !important;
}
}
/* ==========================================================
HEREEXC — PHONE FINAL VISUAL FIX
Based on latest mobile screenshot.
CSS ONLY — no HTML / JS changes.
Listing Coin / Sponsor / Market Chart untouched.
========================================================== */
@media (max-width:900px){
/* ------------------------------------------------------
MAIN PANEL — use the complete available phone width
------------------------------------------------------ */
.hx-main,
.hx-main-grid-parent,
.hx-center-panel{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
}
.hx-main{
padding-left:4px !important;
padding-right:4px !important;
}
/* ------------------------------------------------------
YOU PAY / FOR
Give both sides enough room and stop the selector
from crossing into the neighboring field.
------------------------------------------------------ */
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) !important;
gap:10px !important;
overflow:visible !important;
}
#buy .hx-buy-left,
#buy .hx-buy-right,
#sell .hx-buy-left,
#sell .hx-buy-right{
min-width:0 !important;
width:100% !important;
overflow:visible !important;
}
/* Every field is contained inside its own column. */
#buy .hx-buy-left .hx-input-group,
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-left .hx-input-group,
#sell .hx-buy-right .hx-coin-select{
position:relative !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
overflow:visible !important;
}
/* ------------------------------------------------------
FIAT / COIN ICONS
Keep the logo INSIDE the field instead of hanging
outside the left edge as shown in the screenshot.
------------------------------------------------------ */
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
position:relative !important;
left:0 !important;
margin-left:0 !important;
transform:none !important;
flex:0 0 auto !important;
min-width:50px !important;
max-width:58px !important;
padding-left:7px !important;
padding-right:5px !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
max-width:34px !important;
max-height:34px !important;
object-fit:contain !important;
margin:0 !important;
transform:none !important;
}
/* Fiat text stays visible beside its flag. */
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:11px !important;
}
/* Coin selector contents cannot escape the card. */
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
overflow:hidden !important;
}
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
max-width:34px !important;
max-height:34px !important;
object-fit:contain !important;
}
/* ------------------------------------------------------
ACTION AREA
Keep BUY NOW + 2x2 cards, but make it slightly shorter.
------------------------------------------------------ */
#buy .hx-action-panel,
#sell .hx-action-panel{
grid-template-columns:112px minmax(0,1fr) !important;
grid-template-rows:92px !important;
gap:7px !important;
}
#buy .hx-action-panel .hx-primary-button,
#sell #sellNowButton,
#sell .hx-action-panel .hx-primary-button{
height:92px !important;
min-height:92px !important;
border-radius:12px !important;
font-size:12px !important;
padding:0 4px !important;
}
#buy .hx-action-panel .hx-service-panel,
#sell .hx-action-panel .hx-service-panel{
gap:6px !important;
}
#buy .hx-action-panel .hx-service-card,
#sell .hx-action-panel .hx-service-card{
height:auto !important;
min-height:0 !important;
padding:0 6px !important;
border-radius:10px !important;
gap:5px !important;
font-size:8px !important;
}
/* ------------------------------------------------------
BUY ORDER / SELL ORDER
Keep exactly two equal buttons.
------------------------------------------------------ */
#buy .hx-order-buttons,
#sell .hx-order-buttons{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:7px !important;
}
/* ------------------------------------------------------
WALLET BAR
Four compact equal cells — nothing gets pushed out.
------------------------------------------------------ */
.hx-wallet-row{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(0,1.05fr)
minmax(0,.95fr)
minmax(0,1fr)
minmax(0,1.15fr) !important;
gap:4px !important;
padding:4px 0 !important;
box-sizing:border-box !important;
overflow:visible !important;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-menu,
.hx-wallet-button{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:40px !important;
padding-left:3px !important;
padding-right:3px !important;
white-space:nowrap !important;
}
.hx-wallet-balance{
justify-content:center !important;
gap:2px !important;
}
.hx-wallet-balance span{
font-size:7px !important;
letter-spacing:.3px !important;
white-space:nowrap !important;
}
.hx-wallet-balance strong{
max-width:44px !important;
font-size:8px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
font-size:8px !important;
letter-spacing:.1px !important;
text-overflow:ellipsis !important;
}
.hx-wallet-menu{
height:40px !important;
}
/* ------------------------------------------------------
VERY SMALL PHONES
------------------------------------------------------ */
@media (max-width:420px){
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) !important;
gap:7px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
min-width:46px !important;
max-width:52px !important;
padding-left:5px !important;
padding-right:3px !important;
}
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
max-width:30px !important;
max-height:30px !important;
}
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
font-size:10px !important;
}
#buy .hx-action-panel,
#sell .hx-action-panel{
grid-template-columns:105px minmax(0,1fr) !important;
grid-template-rows:88px !important;
gap:6px !important;
}
#buy .hx-action-panel .hx-primary-button,
#sell #sellNowButton,
#sell .hx-action-panel .hx-primary-button{
height:88px !important;
min-height:88px !important;
font-size:11px !important;
}
.hx-wallet-row{
grid-template-columns:
minmax(0,1.05fr)
minmax(0,.95fr)
minmax(0,1fr)
minmax(0,1.08fr) !important;
gap:3px !important;
}
.hx-wallet-balance,
.hx-wallet-select,
.hx-history-button,
.hx-wallet-button{
height:38px !important;
font-size:7px !important;
}
.hx-wallet-balance span{
font-size:6px !important;
}
.hx-wallet-balance strong{
font-size:7px !important;
max-width:38px !important;
}
}
}
/* ==========================================================
HEREEXC — PHONE TYPOGRAPHY COMPACT
FOCUS ONLY:
BUY / SELL / SWAP / MARKET SLOT
DO NOT MODIFY:
LISTING COIN / SPONSOR / MARKET CHART STRUCTURE
========================================================== */
@media (max-width:900px){
/* ------------------------------------------------------
GLOBAL EXCHANGE PANEL — prevent typography from
consuming the horizontal space.
------------------------------------------------------ */
#buy,
#sell,
#swap,
.hx-market-slot,
.hx-market-slot-section{
font-size:10px !important;
}
/* ------------------------------------------------------
BUY / SELL / SWAP TAB LABELS
------------------------------------------------------ */
#buy .hx-tab,
#sell .hx-tab,
#swap .hx-tab,
.hx-tabs .hx-tab{
font-size:11px !important;
line-height:1 !important;
letter-spacing:.25px !important;
font-weight:800 !important;
}
/* ------------------------------------------------------
BUY / SELL MAIN LABELS
YOU PAY / FOR / YOU SELL / SELLING FOR
------------------------------------------------------ */
#buy .hx-label,
#sell .hx-label,
#swap .hx-label,
#buy label,
#sell label,
#swap label{
font-size:9px !important;
line-height:1.1 !important;
letter-spacing:.45px !important;
margin-bottom:5px !important;
}
/* Larger headings inside exchange cards */
#buy h1,#buy h2,#buy h3,#buy h4,
#sell h1,#sell h2,#sell h3,#sell h4,
#swap h1,#swap h2,#swap h3,#swap h4{
font-size:12px !important;
line-height:1.1 !important;
}
/* ------------------------------------------------------
AMOUNT / COIN SELECTOR TEXT
------------------------------------------------------ */
#buy .hx-buy-row,
#sell .hx-buy-row,
#swap .hx-buy-row{
font-size:10px !important;
}
#buy .hx-buy-row input,
#sell .hx-buy-row input,
#swap .hx-buy-row input{
font-size:12px !important;
}
#buy .hx-buy-right,
#sell .hx-buy-right,
#buy .hx-coin-select,
#sell .hx-coin-select{
font-size:11px !important;
}
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
font-size:10px !important;
}
/* ------------------------------------------------------
BUY NOW / SELL NOW
------------------------------------------------------ */
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button,
#sell #sellNowButton,
#sell .hx-primary-button,
#sell .hx-buy-button{
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.15px !important;
}
/* ------------------------------------------------------
PAYMENT / SELL SERVICE CARDS
Text must fit without changing the 2x2 layout.
------------------------------------------------------ */
#buy .hx-service-card,
#sell .hx-service-card,
#sell .hx-action-panel .hx-service-card{
font-size:7px !important;
font-weight:800 !important;
letter-spacing:0 !important;
line-height:1 !important;
white-space:nowrap !important;
}
#buy .hx-service-card span,
#sell .hx-service-card span{
font-size:7px !important;
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* ------------------------------------------------------
BUY ORDER / SELL ORDER
------------------------------------------------------ */
#buy .hx-order-buttons *,
#sell .hx-order-buttons *,
#buy .hx-order-button,
#sell .hx-order-button{
font-size:10px !important;
line-height:1 !important;
letter-spacing:.15px !important;
}
/* ------------------------------------------------------
WALLET BAR IS PART OF MAIN EXCHANGE PANEL
Keep compact so it doesn't consume the width.
------------------------------------------------------ */
#buy .hx-wallet-row,
#sell .hx-wallet-row,
#swap .hx-wallet-row{
font-size:7px !important;
}
#buy .hx-wallet-row *,
#sell .hx-wallet-row *,
#swap .hx-wallet-row *{
font-size:7px !important;
}
#buy .hx-wallet-balance strong,
#sell .hx-wallet-balance strong,
#swap .hx-wallet-balance strong{
font-size:7px !important;
}
/* ------------------------------------------------------
SWAP — compact text while preserving two columns.
------------------------------------------------------ */
#swap .hx-swap-field-card .hx-label,
#swap .hx-swap-field-card label{
font-size:8px !important;
letter-spacing:.35px !important;
}
#swap .hx-swap-field-card .hx-input-prefix{
font-size:8px !important;
}
#swap .hx-swap-field-card .hx-buy-amount{
font-size:11px !important;
}
#swap .hx-swap-order-card,
#swap .hx-swap-field-card{
font-size:9px !important;
}
/* ------------------------------------------------------
MARKET SLOT — compact typography only.
Layout, chart and dimensions are not restructured.
------------------------------------------------------ */
.hx-market-slot,
.hx-market-slot-section{
font-size:9px !important;
}
.hx-market-slot h1,
.hx-market-slot h2,
.hx-market-slot h3,
.hx-market-slot h4,
.hx-market-slot-section h1,
.hx-market-slot-section h2,
.hx-market-slot-section h3,
.hx-market-slot-section h4{
font-size:10px !important;
line-height:1.1 !important;
letter-spacing:.2px !important;
}
.hx-market-slot button,
.hx-market-slot-section button{
font-size:8px !important;
}
}
/* ----------------------------------------------------------
VERY SMALL PHONES — even tighter typography
---------------------------------------------------------- */
@media (max-width:420px){
#buy .hx-tab,
#sell .hx-tab,
#swap .hx-tab,
.hx-tabs .hx-tab{
font-size:10px !important;
}
#buy .hx-label,
#sell .hx-label,
#swap .hx-label,
#buy label,
#sell label,
#swap label{
font-size:8px !important;
}
#buy .hx-buy-row input,
#sell .hx-buy-row input,
#swap .hx-buy-row input{
font-size:11px !important;
}
#buy .hx-primary-button,
#buy .hx-buy-button,
#buy .hx-action-button,
#sell #sellNowButton,
#sell .hx-primary-button{
font-size:10px !important;
}
#buy .hx-service-card,
#sell .hx-service-card,
#sell .hx-action-panel .hx-service-card,
#buy .hx-service-card span,
#sell .hx-service-card span{
font-size:6.5px !important;
}
#buy .hx-order-buttons *,
#sell .hx-order-buttons *,
#buy .hx-order-button,
#sell .hx-order-button{
font-size:9px !important;
}
#swap .hx-swap-field-card .hx-label,
#swap .hx-swap-field-card label{
font-size:7px !important;
}
#swap .hx-swap-field-card .hx-buy-amount{
font-size:10px !important;
}
.hx-market-slot,
.hx-market-slot-section{
font-size:8px !important;
}
}
/* ==========================================================
HEREEXC — MOBILE BUY / SELL INPUT
THINNER + LONGER
========================================================== */
@media (max-width:900px){
/* ROW — lebih memanjang secara horizontal */
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(0,1.08fr)
minmax(0,.92fr) !important;
gap:8px !important;
align-items:center !important;
}
/* LEFT INPUT */
#buy .hx-buy-left .hx-input-group,
#sell .hx-buy-left .hx-input-group{
width:100% !important;
height:48px !important;
min-height:48px !important;
max-height:48px !important;
display:flex !important;
align-items:center !important;
overflow:hidden !important;
box-sizing:border-box !important;
border-radius:9px !important;
}
/* PREFIX — lebih kecil supaya area angka memanjang */
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex:0 0 58px !important;
width:58px !important;
min-width:58px !important;
max-width:58px !important;
height:46px !important;
padding:0 5px !important;
gap:4px !important;
box-sizing:border-box !important;
}
/* LOGO FIAT */
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:28px !important;
height:28px !important;
min-width:28px !important;
max-width:28px !important;
flex:0 0 28px !important;
}
/* IDR / FIAT TEXT */
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
max-width:27px !important;
font-size:9px !important;
line-height:1 !important;
}
/* ANGKA — ambil seluruh ruang yang tersisa */
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
flex:1 1 0 !important;
width:0 !important;
min-width:0 !important;
height:46px !important;
padding:0 5px !important;
font-size:12px !important;
line-height:46px !important;
box-sizing:border-box !important;
}
/* RIGHT SELECTOR — tipis tetapi lebih panjang */
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
width:100% !important;
height:48px !important;
min-height:48px !important;
max-height:48px !important;
padding:0 8px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
overflow:hidden !important;
border-radius:9px !important;
}
/* COIN / FUND LOGO */
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:30px !important;
height:30px !important;
min-width:30px !important;
max-width:30px !important;
flex:0 0 30px !important;
}
/* BTC / FUND TEXT */
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
flex:1 1 0 !important;
width:0 !important;
min-width:0 !important;
font-size:11px !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ARROW */
#buy .hx-buy-right .hx-coin-select::after,
#sell .hx-buy-right .hx-coin-select::after{
flex:0 0 auto !important;
margin-left:3px !important;
}
/* LABEL */
#buy .hx-buy-left .hx-label,
#buy .hx-buy-right .hx-label,
#sell .hx-buy-left .hx-label,
#sell .hx-buy-right .hx-label{
font-size:8px !important;
line-height:1 !important;
margin-bottom:4px !important;
letter-spacing:.25px !important;
}
}
/* ==========================================================
VERY SMALL PHONE
========================================================== */
@media (max-width:420px){
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:
minmax(0,1.1fr)
minmax(0,.9fr) !important;
gap:6px !important;
}
#buy .hx-buy-left .hx-input-group,
#sell .hx-buy-left .hx-input-group,
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
height:45px !important;
min-height:45px !important;
max-height:45px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex-basis:52px !important;
width:52px !important;
min-width:52px !important;
max-width:52px !important;
height:43px !important;
padding:0 4px !important;
gap:3px !important;
}
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:26px !important;
height:26px !important;
min-width:26px !important;
max-width:26px !important;
flex-basis:26px !important;
}
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
font-size:8px !important;
max-width:23px !important;
}
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
height:43px !important;
line-height:43px !important;
font-size:11px !important;
}
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
padding:0 6px !important;
}
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:27px !important;
height:27px !important;
min-width:27px !important;
max-width:27px !important;
flex-basis:27px !important;
}
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
font-size:10px !important;
}
}/* ==========================================================
HEREEXC — MOBILE BUY / SELL FIELD
FINAL THIN + LONG VERSION
========================================================== */
@media (max-width:900px){
/* ======================================================
BUY + SELL — TWO LONG HORIZONTAL FIELDS
====================================================== */
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) !important;
gap:8px !important;
align-items:center !important;
}
/* ======================================================
LEFT FIELD — IDR / BTC AMOUNT
====================================================== */
#buy .hx-buy-left .hx-input-group,
#sell .hx-buy-left .hx-input-group{
width:100% !important;
height:44px !important;
min-height:44px !important;
max-height:44px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
border-radius:9px !important;
}
/* ======================================================
FIAT PREFIX
====================================================== */
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex:0 0 52px !important;
width:52px !important;
min-width:52px !important;
max-width:52px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 3px !important;
margin:0 !important;
gap:3px !important;
box-sizing:border-box !important;
border:0 !important;
background:transparent !important;
overflow:hidden !important;
}
/* FIAT LOGO */
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:27px !important;
height:27px !important;
min-width:27px !important;
max-width:27px !important;
min-height:27px !important;
max-height:27px !important;
flex:0 0 27px !important;
object-fit:contain !important;
margin:0 !important;
}
/* IDR */
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
flex:0 1 auto !important;
min-width:0 !important;
max-width:28px !important;
font-size:9px !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ======================================================
AMOUNT INPUT
IMPORTANT:
Remove the second visible box.
====================================================== */
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
flex:1 1 0 !important;
width:0 !important;
min-width:0 !important;
max-width:none !important;
height:42px !important;
padding:0 6px !important;
margin:0 !important;
border:0 !important;
outline:none !important;
background:transparent !important;
box-shadow:none !important;
box-sizing:border-box !important;
font-size:12px !important;
line-height:42px !important;
text-align:left !important;
}
/* ======================================================
RIGHT FIELD — BTC / FUND
====================================================== */
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
width:100% !important;
height:44px !important;
min-height:44px !important;
max-height:44px !important;
display:flex !important;
align-items:center !important;
padding:0 7px !important;
margin:0 !important;
box-sizing:border-box !important;
border-radius:9px !important;
overflow:hidden !important;
}
/* COIN / FUND LOGO */
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:28px !important;
height:28px !important;
min-width:28px !important;
max-width:28px !important;
min-height:28px !important;
max-height:28px !important;
flex:0 0 28px !important;
object-fit:contain !important;
margin-right:5px !important;
}
/* BTC / FUND TEXT */
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
flex:1 1 0 !important;
width:0 !important;
min-width:0 !important;
font-size:11px !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* DROPDOWN ARROW */
#buy .hx-buy-right .hx-coin-select::after,
#sell .hx-buy-right .hx-coin-select::after{
flex:0 0 auto !important;
margin-left:3px !important;
font-size:10px !important;
}
/* ======================================================
LABELS
====================================================== */
#buy .hx-buy-left > label,
#buy .hx-buy-right > label,
#sell .hx-buy-left > label,
#sell .hx-buy-right > label,
#buy .hx-buy-left .hx-label,
#buy .hx-buy-right .hx-label,
#sell .hx-buy-left .hx-label,
#sell .hx-buy-right .hx-label{
font-size:8px !important;
line-height:1 !important;
margin-bottom:4px !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width:420px){
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:
minmax(0,1.2fr)
minmax(0,.8fr) !important;
gap:6px !important;
}
#buy .hx-buy-left .hx-input-group,
#sell .hx-buy-left .hx-input-group,
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
height:42px !important;
min-height:42px !important;
max-height:42px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex-basis:49px !important;
width:49px !important;
min-width:49px !important;
max-width:49px !important;
height:40px !important;
}
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:25px !important;
height:25px !important;
min-width:25px !important;
max-width:25px !important;
min-height:25px !important;
max-height:25px !important;
flex-basis:25px !important;
}
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
font-size:8px !important;
max-width:25px !important;
}
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
height:40px !important;
line-height:40px !important;
font-size:11px !important;
}
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:26px !important;
height:26px !important;
min-width:26px !important;
max-width:26px !important;
min-height:26px !important;
max-height:26px !important;
}
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
font-size:10px !important;
}
}/* ==========================================================
HEREEXC — MOBILE BUY / SELL FINAL WIDTH BALANCE
50% LEFT | 50% RIGHT
========================================================== */
@media (max-width:900px){
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
width:100% !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:8px !important;
align-items:center !important;
}
/* ======================================================
LEFT FIELD
====================================================== */
#buy .hx-buy-left .hx-input-group,
#sell .hx-buy-left .hx-input-group{
width:100% !important;
height:44px !important;
min-height:44px !important;
max-height:44px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* IDR PREFIX SMALLER */
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex:0 0 46px !important;
width:46px !important;
min-width:46px !important;
max-width:46px !important;
height:42px !important;
padding:0 3px !important;
gap:2px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
background:transparent !important;
box-sizing:border-box !important;
}
/* FLAG / COIN ICON */
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:27px !important;
height:27px !important;
min-width:27px !important;
max-width:27px !important;
min-height:27px !important;
max-height:27px !important;
flex:0 0 27px !important;
margin:0 !important;
}
/* IDR TEXT */
#buy .hx-buy-left .hx-input-prefix span,
#sell .hx-buy-left .hx-input-prefix span{
display:none !important;
}
/* AMOUNT */
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
flex:1 1 auto !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
height:42px !important;
padding:0 6px !important;
margin:0 !important;
border:0 !important;
outline:none !important;
box-shadow:none !important;
background:transparent !important;
font-size:12px !important;
line-height:42px !important;
}
/* ======================================================
RIGHT FIELD — BTC / FUND
====================================================== */
#buy .hx-buy-right .hx-coin-select,
#sell .hx-buy-right .hx-coin-select{
width:100% !important;
height:44px !important;
min-height:44px !important;
max-height:44px !important;
padding:0 7px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* BTC / FUND ICON */
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
flex:0 0 28px !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
max-width:28px !important;
min-height:28px !important;
max-height:28px !important;
margin-right:6px !important;
}
/* BTC / FUND NAME */
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
flex:1 1 auto !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
font-size:11px !important;
font-weight:900 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ARROW */
#buy .hx-buy-right .hx-coin-select::after,
#sell .hx-buy-right .hx-coin-select::after{
flex:0 0 auto !important;
margin-left:3px !important;
font-size:9px !important;
}
/* ======================================================
LABELS
====================================================== */
#buy .hx-buy-left .hx-label,
#buy .hx-buy-right .hx-label,
#sell .hx-buy-left .hx-label,
#sell .hx-buy-right .hx-label{
font-size:8px !important;
line-height:1 !important;
margin-bottom:4px !important;
letter-spacing:.2px !important;
}
}
/* ==========================================================
VERY SMALL PHONE
========================================================== */
@media (max-width:420px){
#buy .hx-buy-row,
#sell .hx-buy-row,
#sell .hx-sell-card > .hx-buy-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:6px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex-basis:42px !important;
width:42px !important;
min-width:42px !important;
max-width:42px !important;
}
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:25px !important;
height:25px !important;
min-width:25px !important;
max-width:25px !important;
}
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
font-size:11px !important;
}
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:26px !important;
height:26px !important;
min-width:26px !important;
max-width:26px !important;
}
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
font-size:10px !important;
}
}/* ==========================================================
HEREEXC — MOBILE BUY / SELL
SMALLER LOGO + SMALLER TYPOGRAPHY
========================================================== */
@media (max-width:900px){
/* ------------------------------------------------------
LABEL
YOU PAY / FOR / YOU SELL / SELLING FOR
------------------------------------------------------ */
#buy .hx-buy-left .hx-label,
#buy .hx-buy-right .hx-label,
#sell .hx-buy-left .hx-label,
#sell .hx-buy-right .hx-label{
font-size:7px !important;
line-height:1 !important;
letter-spacing:.15px !important;
margin-bottom:3px !important;
}
/* ------------------------------------------------------
FIAT / LEFT LOGO
------------------------------------------------------ */
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:22px !important;
height:22px !important;
min-width:22px !important;
max-width:22px !important;
min-height:22px !important;
max-height:22px !important;
flex:0 0 22px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex:0 0 38px !important;
width:38px !important;
min-width:38px !important;
max-width:38px !important;
padding:0 2px !important;
}
/* ------------------------------------------------------
AMOUNT TEXT
------------------------------------------------------ */
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
font-size:10px !important;
font-weight:700 !important;
padding:0 4px !important;
}
/* ------------------------------------------------------
BTC / FUND LOGO
------------------------------------------------------ */
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:22px !important;
height:22px !important;
min-width:22px !important;
max-width:22px !important;
min-height:22px !important;
max-height:22px !important;
flex:0 0 22px !important;
margin-right:4px !important;
}
/* ------------------------------------------------------
BTC / FUND TEXT
------------------------------------------------------ */
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
font-size:9px !important;
font-weight:800 !important;
letter-spacing:0 !important;
}
/* Dropdown arrow */
#buy .hx-buy-right .hx-coin-select::after,
#sell .hx-buy-right .hx-coin-select::after{
font-size:8px !important;
margin-left:2px !important;
}
}
/* ==========================================================
VERY SMALL PHONE
========================================================== */
@media (max-width:420px){
#buy .hx-buy-left .hx-input-prefix img,
#sell .hx-buy-left .hx-input-prefix img{
width:20px !important;
height:20px !important;
min-width:20px !important;
max-width:20px !important;
min-height:20px !important;
max-height:20px !important;
flex-basis:20px !important;
}
#buy .hx-buy-left .hx-input-prefix,
#sell .hx-buy-left .hx-input-prefix{
flex-basis:35px !important;
width:35px !important;
min-width:35px !important;
max-width:35px !important;
}
#buy .hx-buy-left .hx-input-group input,
#sell .hx-buy-left .hx-input-group input{
font-size:9px !important;
}
#buy .hx-buy-right .hx-coin-select img,
#sell .hx-buy-right .hx-coin-select img{
width:20px !important;
height:20px !important;
min-width:20px !important;
max-width:20px !important;
min-height:20px !important;
max-height:20px !important;
flex-basis:20px !important;
}
#buy .hx-buy-right .hx-coin-select span,
#sell .hx-buy-right .hx-coin-select span{
font-size:8px !important;
}
}@media (max-width:900px){
#buy .hx-buy-row{
grid-template-columns:1.15fr .85fr !important;
gap:8px !important;
}
}
@media (max-width:420px){
#buy .hx-buy-row{
grid-template-columns:1.18fr .82fr !important;
gap:6px !important;
}
}@media (max-width:900px){
#buy .hx-buy-row{
grid-template-columns:1.10fr .90fr !important;
gap:8px !important;
}
}
@media (max-width:420px){
#buy .hx-buy-row{
grid-template-columns:1.12fr .88fr !important;
gap:6px !important;
}
}
/* COPY — hanya rata kanan */
.hx-swap-order-card .hx-order-row .hx-copy-order{
justify-self:end !important;
margin-left:auto !important;
}