/* Global */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: url('background.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Main container */
.container {
  width: 95%;
  max-width: 360px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Removed z-index to allow modal overlay */
}

/* Responsive: small screens portrait */
@media (max-width: 480px) and (orientation: portrait) {
  body {
    justify-content: flex-start;
  }
  .container {
    width: 100%;
    margin: 10px 0;
    padding: 16px;
  }
}

/* Responsive: small screens landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .container {
    max-width: 100%;
    margin: 10px;
  }
}

/* Responsive: larger tablets and desktop */
@media (min-width: 769px) {
  .container {
    max-width: 600px;
    margin: 40px auto;
  }
}

/* Typography */
.container h1 {
  text-align: center;
  margin-bottom: 12px;
  font-size: 1.4rem;
}
.container p {
  text-align: center;
  margin-bottom: 16px;
  font-size: 1rem;
}
#wallet-address {
  text-align: center;
  margin-bottom: 16px;
  word-break: break-word;
  font-size: 0.9rem;
}

/* Buttons */
button {
  width: 100%;
  margin: 8px 0;
  padding: 12px;
  background: #ff9900;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
button:hover {
  background: #e88e00;
}

/* WalletConnect/MetaMask/Coinbase list icons */
.web3modal-modal-card .provider-wrapper img {
  max-width: 40px;
  max-height: 40px;
}
.web3modal-modal-card .provider-wrapper .provider-name {
  font-size: 0.9rem;
  margin-top: 4px;
}

/* Enhanced z-index for Web3Modal elements */
.web3modal-wrapper,
.web3modal-portal,
.web3modal-modal-wrapper,
.web3modal-modal,
.web3modal-modal-container,
.web3modal-modal-lightbox,
.web3modal-overlay,
.web3modal-modal-card {
  z-index: 10000 !important;
}

/* Ensure entire Web3Modal container and its children are on top */
#WEB3_CONNECT_MODAL_ID,
#WEB3_CONNECT_MODAL_ID * {
  z-index: 10000 !important;
}