/*! Custom Branding CSS - TMX TGE */

/* ---------------------------------
   Base / Branding
---------------------------------- */

/* Page Background */
body{
  background-color:#FAFAFA!important;
}

/* Top Bar (dark header strip) */
.header,
.header-main,
.nk-header{
  background-color:#17354B!important;
  border-color:#17354B!important;
  color:#FFFFFF!important;
}

/* Navbar (menu row) */
.navbar,
.navbar-default,
.navbar-nav{
  background-color:#FFFFFF!important;
  border-color:#FFFFFF!important;
  color:#000000!important;
}

/* Navbar link hover */
.navbar a:hover,
.navbar-nav a:hover,
.navbar-menu a:hover,
.navbar-page a:hover{
  color:#555555!important;
}

/* Buttons */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color:#FCC517!important;
  border-color:#FCC517!important;
  color:#000000!important;
}

/* Dashboard Logo */
.topbar-logo img{
  height:80px!important;
  max-height:none!important;
}

/* Auth Page Logo */
.page-ath-logo-img{
  height:132px!important;
  max-height:none!important;
  width:auto!important;
}

/* Make the "Sign in" heading smaller */
.page-ath-heading {
  font-size: 34px !important;
  font-weight: 600;
}

/* Misc */
.user-account-dashboard .content-area .card-full-height{
  text-align:center;
}

/* ---------------------------------
   Language switcher in navbar
---------------------------------- */

.navbar .nav-lang{
  position:relative;
  margin-left:16px;
}

/* Toggle as horizontal pill */
.navbar .nav-lang > a,
.navbar .nav-lang > button,
.navbar .nav-lang .btn{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  padding:8px 16px!important;
  line-height:1.2!important;
  border-radius:9999px!important;
  border:1px solid rgba(23,53,75,.30)!important;
  background:#fff!important;
}

/* If theme forces a circular class, still keep pill */
.navbar .nav-lang > a[class*="circle"],
.navbar .nav-lang > button[class*="circle"],
.navbar .nav-lang .btn[class*="circle"]{
  border-radius:9999px!important;
}

/* Dropdown should open downward from the pill */
.navbar .nav-lang .dropdown-content{
  position:absolute;
  top:calc(100% + 10px)!important;
  bottom:auto!important;
  right:0;
  min-width:160px;
  padding:8px 0!important;
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 32px rgba(17,24,39,0.18);
  z-index:1205;
}

/* Dropdown arrow */
.navbar .nav-lang .dropdown-content:before,
.navbar .nav-lang .dropdown-content:after{
  content:"";
  position:absolute;
  left:auto;right:20px;
  top:-8px;bottom:auto;
  border:8px solid transparent;
}
.navbar .nav-lang .dropdown-content:after{
  border-bottom-color:#fff!important;
}

/* Menu items: padding + hover */
.navbar .nav-lang .dropdown-content a,
.navbar .nav-lang .dropdown-content .dropdown-item,
.navbar .nav-lang .dropdown-content li > a{
  display:block;
  padding:10px 14px;
  font-size:14px;
  line-height:1.2;
  color:#41546e;
  white-space:nowrap;
}
.navbar .nav-lang .dropdown-content a:hover,
.navbar .nav-lang .dropdown-content .dropdown-item:hover,
.navbar .nav-lang .dropdown-content li > a:hover{
  background:#f5f7fb;
  color:#17354B;
}

/* ---------------------------------
   Fixed header layout (Desktop only)
---------------------------------- */

@media (min-width: 992px) {
  .topbar-wrap { position: static !important; }

  .topbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    height: 92px;
  }

  .navbar {
    position: fixed !important;
    top: 92px;
    left: 0; right: 0;
    z-index: 1099;
    background: #fff;
    overflow: visible !important;
  }

  /* Offset page so content isn't hidden under fixed bars */
  .page-content {
    padding-top: 192px; /* topbar(92) + navbar(~100) */
  }
}

/* ======================================================================
   TOKEN CALCULATOR — UI Fixes (mobile toggle + alignment + overflow)
   ====================================================================== */

/* 1) Toggle header: prevent text overlap and make it responsive */
.calc-mode-toggle .btn-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.calc-mode-toggle .calc-mode-btn {
  white-space: normal;        /* allow wrapping inside button */
  line-height: 1.2;
}

@media (max-width: 576px) {
  .calc-mode-toggle .calc-mode-btn {
    flex: 0 0 50%;            /* two buttons in a row */
    max-width: 50%;
    text-align: center;
    font-size: 13px;
    padding: 10px 8px !important;
  }
}

/* 2) Keep both input frames on one level with the swap icon */
.bidirectional-calc .calc-input-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

/* Equalize input heights */
.bidirectional-calc .token-pay-amount .input-bordered,
.bidirectional-calc .token-pay-amount .input-with-hint{
  height: 56px;
}

/* Swap icon sizing/centering */
.bidirectional-calc .exchange-icon {
  align-self: center;
  width: 46px;
  height: 46px;
  font-size: 16px;
}

/* 3) Placeholder/pill overflow & divider clipping */
.bidirectional-calc .token-pay-amount{
  position: relative;
  margin: 0; /* avoid small vertical drift */
}

.bidirectional-calc .token-pay-amount .input-bordered,
.bidirectional-calc .token-pay-amount .input-with-hint{
  box-sizing: border-box;
  width: 100%;
  line-height: 1.25;
  padding-inline-start: 14px;  /* normal left padding */
  padding-inline-end: 92px;    /* reserve space for right-side pill */
  overflow: hidden;            /* keeps internal lines inside rounded box */
}

/* Currency pill sits INSIDE the input border */
.bidirectional-calc .token-pay-amount .token-pay-currency{
  position: absolute;
  top: 1px;
  right: 1px;
  height: calc(100% - 2px);    /* never pierce rounded corners */
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 12px 0 16px;
  border-left: 1px solid #d7e0ea;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  pointer-events: none;        /* never block caret/focus in input */
}

/* Pill text + tidy vertical divider */
.bidirectional-calc .token-pay-amount .token-pay-currency .input-hint-sap{
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: #6B7A90;
  height: 100%;
  position: relative;
  padding-left: 10px;
}

.bidirectional-calc .token-pay-amount .token-pay-currency .input-hint-sap::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;                     /* inset so it stays inside border radius */
  height: calc(100% - 16px);
  width: 1px;
  background: #d7e0ea;
}

/* 4) Mobile stacking (keeps pill behavior intact) */
@media (max-width: 768px){
  .bidirectional-calc .calc-input-row{
    grid-template-columns: 1fr; /* stack vertically */
    gap: 10px;
  }
  .bidirectional-calc .exchange-icon{
    justify-self: center;
    transform: rotate(90deg);   /* preserves your visual cue */
  }
}