/* AhilyanagarDJ's Music — v14.15 Auth Active Tabs
   Makes Login / Sign Up clearly indicate the current page on mobile and WebView/desktop.
*/

/* On auth pages, both auth links start from the same neutral style. This overrides
   the older always-gold .primary-link rule so Sign Up is not falsely highlighted
   while the user is on Login. */
body.page-login .account-nav a[href="login.php"],
body.page-login .account-nav a[href="register.php"],
body.page-register .account-nav a[href="login.php"],
body.page-register .account-nav a[href="register.php"]{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:40px;
  padding:10px 16px;
  border:1px solid #3b3129;
  border-radius:999px;
  background:#1d1a17;
  color:#eee3d8;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}

/* Current page: strong gold/orange state. */
body.page-login .account-nav a[href="login.php"].active,
body.page-register .account-nav a[href="register.php"].active{
  border-color:#ffc159;
  background:linear-gradient(135deg,#ffd36a 0%,#ff9a2f 52%,#ff7414 100%);
  color:#1a0b02;
  box-shadow:0 0 0 2px rgba(255,179,65,.12),0 7px 20px rgba(255,116,20,.20);
  font-weight:950;
}

/* Small active indicator without changing the text or layout. */
body.page-login .account-nav a[href="login.php"].active::after,
body.page-register .account-nav a[href="register.php"].active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:18px;
  height:3px;
  border-radius:999px;
  background:#ffc159;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(255,193,89,.45);
}

body.page-login .account-nav a[href="register.php"]:hover,
body.page-register .account-nav a[href="login.php"]:hover{
  background:#29241f;
  border-color:#544438;
  color:#fff8ef;
}

body.page-login .account-nav a[href="login.php"].active:hover,
body.page-register .account-nav a[href="register.php"].active:hover{
  transform:translateY(-1px);
}

body.page-login .account-nav a[href="login.php"]:focus-visible,
body.page-login .account-nav a[href="register.php"]:focus-visible,
body.page-register .account-nav a[href="login.php"]:focus-visible,
body.page-register .account-nav a[href="register.php"]:focus-visible{
  outline:2px solid #ffd36a;
  outline-offset:3px;
}

/* Keep the pair compact and readable on phones. */
@media (max-width:700px){
  body.page-login .account-nav,
  body.page-register .account-nav{
    gap:7px;
  }
  body.page-login .account-nav a[href="login.php"],
  body.page-login .account-nav a[href="register.php"],
  body.page-register .account-nav a[href="login.php"],
  body.page-register .account-nav a[href="register.php"]{
    min-width:78px;
    min-height:38px;
    padding:9px 14px;
  }
}