/* styles.css */

/* ---------- Reset & Base Styles ---------- */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial,sans-serif;
  background-color:#121212;
  color:#e0e0e0;
  line-height:1.6;
}

/* ---------- Header ---------- */
.header{
  background-color:#1e1e1e;
  padding:20px;
  text-align:center;
  border-bottom:1px solid #333;
}
.header .logo{
  max-width:80px;
  display:block;
  margin:0 auto 10px;
}
.header h1{
  font-size:2rem;
  color:#fff;
}

/* ---------- Wallet Section ---------- */
.wallet-section{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:15px;
}
.connect-btn{
  background-color:#4e9fff;
  color:#fff;
  border:none;
  padding:10px 15px;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
  transition:background-color .3s ease;
}
.connect-btn:hover{background-color:#3a80cc;}
.wallet-address,.balance-display{font-size:1rem;}

/* ---------- Tabs Container ---------- */
.tabs-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:#1e1e1e;
  padding:10px 20px;
  border-bottom:1px solid #333;
}
.tabs,.time-tabs{display:flex;gap:10px;}
.tab,.time-tab{
  background:transparent;
  border:none;
  color:#aaa;
  padding:8px 12px;
  cursor:pointer;
  border-radius:4px;
  transition:background .3s,color .3s;
}
.tab.active,.time-tab.active{background-color:#333;color:#fff;}
.tab:hover,.time-tab:hover{background-color:#333;color:#fff;}

/* ---------- Search Section ---------- */
.search-section{
  padding:10px 20px;
  text-align:center;
}
#searchInput{
  width:50%;
  max-width:300px;
  padding:8px 12px;
  border:1px solid #444;
  border-radius:4px;
  background:#1e1e1e;
  color:#e0e0e0;
}

/* ---------- Mint Section (desktop default) ---------- */
.mint-section{
  padding:20px;
  border-top:1px solid #333;
  border-bottom:1px solid #333;
  text-align:center;
}
.mint-section h2{margin-bottom:15px;color:#fff;}

#mintForm{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
}
.form-group{display:flex;flex-direction:column;align-items:flex-start;}
.form-group label{
  margin-bottom:5px;
  font-size:.9rem;
  color:#ccc;
}
.form-group input{
  padding:8px;
  width:200px;
  border:1px solid #444;
  border-radius:4px;
  background:#1e1e1e;
  color:#e0e0e0;
}
.mint-btn{
  background-color:#57d057;
  color:#fff;
  border:none;
  padding:10px 15px;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
  transition:background-color .3s ease;
}
.mint-btn:hover{background-color:#3fa73f;}

/* ---------- Table Section ---------- */
.table-section{padding:20px;overflow-x:auto;}
#brc20Table{
  width:100%;
  border-collapse:collapse;
  background:#1e1e1e;
  margin:0 auto;
}
#brc20Table thead{background-color:#333;}
#brc20Table th,#brc20Table td{
  padding:10px;
  border:1px solid #444;
  text-align:center;
  font-size:.9rem;
}
#brc20Table tbody tr:hover{background-color:#2a2a2a;}

/* ---------- Progress Bar ---------- */
.progress-bar{
  width:100%;
  height:10px;
  background-color:#333;
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background-color:#57d057;
  transition:width .4s ease;
}

/* ---------- Action Buttons in Table ---------- */
.action-btn{
  background-color:#4e9fff;
  color:#fff;
  border:none;
  padding:5px 8px;
  margin:2px;
  border-radius:4px;
  cursor:pointer;
  font-size:.8rem;
  transition:background-color .3s ease;
}
.action-btn:hover{background-color:#3a80cc;}
.trade-btn{background-color:#ff874e;}
.trade-btn:hover{background-color:#cc6d3b;}

/* ---------- Pagination Section ---------- */
.pagination-section{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:15px;
  gap:10px;
}
.pagination-btn{
  background-color:#4e9fff;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:4px;
  cursor:pointer;
  transition:background-color .3s ease;
}
.pagination-btn:hover{background-color:#3a80cc;}
.pagination-info{font-size:.9rem;color:#ccc;}

/* ---------- Responsive (<768px) ---------- */
@media (max-width:768px){

  .wallet-section,.tabs-container,.mint-section,.search-section{
    flex-direction:column;
    text-align:center;
  }
  #searchInput{width:80%;}
  .form-group input{width:100%;}

  /* grid wrapper */
  .token-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
    margin-top:20px;
  }

  /* card */
  .token-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:0 4px 12px var(--shadow-color);
    transition:transform .2s;
  }
  .token-card:hover{transform:translateY(-4px);}

  /* label/value pairs */
  .token-field{display:flex;justify-content:space-between;}
  .token-label{color:var(--text-secondary);font-size:.85rem;}
  .token-value{font-family:'Roboto Mono',monospace;}

  .token-card .mint-btn{margin-top:8px;width:100%;padding:8px 0;}

  /* ===== Mint section: tighter gap & zoomed look ===== */
  .mint-section{
    background:linear-gradient(180deg,#1e1e1e 0%,#272727 100%);
    padding:35px 18px;
    margin:15px 8px;           /* reduced outside gap */
    border-radius:12px;
    box-shadow:0 6px 14px rgba(0,0,0,.6);

    /* subtle zoom */
    transform:scale(1.02);
    transform-origin:center top;
  }
  .mint-section h2{
    font-size:2rem;
    margin-bottom:22px;
  }
  .mint-section .form-group{
    width:100%;
    max-width:360px;
    margin:0 auto;
  }
  .mint-section .form-group input{
    width:100%;
    font-size:1.2rem;
    padding:16px 14px;
  }
  .mint-section .mint-btn{
    width:100%;
    max-width:360px;
    padding:16px 0;
    font-size:1.2rem;
    margin-top:12px;
  }
}