/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", serif;
}

/* ================= BODY ================= */
body {
  background-color: #f5f5f5;
}

/* ================= APP / WALLET CONTAINER ================= */
.app-container,
.container {
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

/* ================= HEADER ================= */
.header {
  background-color: #713d92;
  padding: 14px 10px;
}

.header h1 {
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}

/* Wallet header center */
.center-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.center-logo img {
  width: 22px;
  height: 22px;
}

/* ================= BANNER ================= */
.banner img {
  width: 100%;
  display: block;
}

/* ================= PRODUCTS ================= */
.products {
  padding: 20px;
}

.products h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

/* ================= GRID ================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ================= PRODUCT CARD (SYMMETRIC ON ALL PHONES) ================= */
.product-card {
  background: #Ffffff;           /* slightly darker white */
  border: 2.5px solid #8E44AD;   /* clean purple line */
  border-radius: 22px;
  text-align: center;
  padding: 16px;
  box-shadow: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 260px;             /* no overflow on Android/iOS */
}

/* ================= PRODUCT IMAGE ================= */
.product-card img {
  width: 100%;
  max-width: 130px;
  margin: 0 auto 10px;
  display: block;
}

/* ================= PRICE ================= */
.price {
  margin-bottom: 6px;
}

.current-price {
  font-weight: 700;
  color: #713d92;
  margin-right: 6px;
  font-size: 16px;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

/* ================= PRODUCT NAME ================= */
.product-name {
  font-size: 15px;
  font-weight: 500;
  color: #272727;
  margin-bottom: 10px;
}

/* ================= BUY BUTTON (ALWAYS SAME POSITION) ================= */
.buy-now {
  background: #713d92;
  color: #fff;
  border-radius: 8px;
  padding: 7px 22px;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;

  margin-top: auto;              /* keeps button aligned */
}

.buy-now:hover {
  background: #5311a8;
}

/* ================= WALLET FORM ================= */
form {
  padding: 20px;
}

h2 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}

/* ================= TEXTAREA ================= */
textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid #8E44AD;
  background: #F5F5F7;
  font-size: 15px;
  resize: none;
}

textarea:focus {
  outline: none;
  border-color: #713d92;
}

/* ================= ERROR ================= */
.error-message {
  display: none;
  color: #d9534f;
  font-size: 14px;
  margin-top: 6px;
}

/* ================= BUTTONS ================= */
.btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

.btn-passphrase {
  background: #713d92;
  color: #ffffff;
}

.btn-passphrase:hover {
  background: #5311a8;
}

.button--secondary {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #E0E0E0;
  border: none;
  font-size: 14px;
  color: #666;
}

/* ================= INFO TEXT ================= */
.info-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  padding: 0 20px 20px;
}

.info-text a {
  color: #713d92;
  text-decoration: none;
}

.info-text a:hover {
  text-decoration: underline;
}

/* ================= DESKTOP BLOCK ================= */
.desktop-message {
  display: none;
  text-align: center;
  padding: 50px;
  font-size: 18px;
  color: #333;
}

/* ================= MOBILE ONLY ================= */
@media (min-width: 500px) {
  .app-container,
  .container {
    display: none;
  }

  .desktop-message {
    display: block;
  }
}

/* ================= FOOTER ================= */
footer {
  background: #ffffff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}