/* =================================

   SUPPORT PAGE

  ================================= */



  .support-container {

   width: 100%;

   max-width: 900px;

   margin: auto;

   padding: 45px 20px 70px;

  }



  .support-card {

   background: var(--surface);

   border: 1px solid var(--border);

   border-radius: 18px;

   padding: 35px;

  }



  .support-header {

   text-align: center;

   margin-bottom: 35px;

  }



  .support-header img {

   width: 70px;

   height: 70px;

   object-fit: contain;

   margin-bottom: 15px;

  }



  .support-header h1 {

   font-size: 32px;

   margin-bottom: 10px;

  }



  .support-header p {

   color: var(--text-secondary);

   line-height: 1.6;

   max-width: 600px;

   margin: auto;

  }



  /* QUICK AMOUNTS */



  .amount-section h2 {

   font-size: 20px;

   margin-bottom: 15px;

  }



  .amount-buttons {

   display: grid;

   grid-template-columns: repeat(3, 1fr);

   gap: 12px;

  }



  .amount-btn {

   border: 1px solid var(--border);

   background: var(--bg);

   color: var(--text);

   border-radius: 10px;

   padding: 15px 10px;

   cursor: pointer;

   transition: 0.2s;

  }



  .amount-btn:hover {

   background: var(--surface-hover);

   transform: translateY(-2px);

  }



  .amount-btn.active {

   background: var(--accent);

   color: #ffffff;

   border-color: var(--accent);

  }



  .amount-name {

   display: block;

   font-size: 14px;

   margin-bottom: 5px;

  }



  .amount-value {

   display: block;

   font-size: 18px;

   font-weight: 700;

  }



  /* CUSTOM AMOUNT */



  .custom-section {

   margin-top: 25px;

  }



  .custom-section label,

  .message-section label {

   display: block;

   font-size: 14px;

   margin-bottom: 8px;

   color: var(--text-secondary);

  }



  .amount-input-wrapper {

   position: relative;

  }



  .amount-input-wrapper span {

   position: absolute;

   left: 15px;

   top: 50%;

   transform: translateY(-50%);

   font-weight: 700;

   color: var(--text-secondary);

  }



  #customAmount {

   width: 100%;

   height: 48px;

   padding: 0 15px 0 35px;

   border-radius: 9px;

   border: 1px solid var(--border);

   background: var(--bg);

   color: var(--text);

   outline: none;

   font-size: 16px;

  }



  #customAmount:focus,

  #message:focus {

   border-color: var(--accent);

  }



  .amount-limit {

   display: block;

   margin-top: 7px;

   color: var(--text-secondary);

   font-size: 12px;

  }



  /* MESSAGE */



  .message-section {

   margin-top: 25px;

  }



  #message {

   width: 100%;

   min-height: 110px;

   resize: vertical;

   padding: 13px;

   border-radius: 9px;

   border: 1px solid var(--border);

   background: var(--bg);

   color: var(--text);

   outline: none;

   font-family: inherit;

   font-size: 14px;

  }



  /* PAYMENT */



  .payment-section {

   margin-top: 30px;

   padding-top: 30px;

   border-top: 1px solid var(--border);

   text-align: center;

  }



  .payment-section h2 {

   font-size: 21px;

   margin-bottom: 8px;

  }



  .payment-section p {

   color: var(--text-secondary);

   font-size: 14px;

   margin-bottom: 20px;

  }



  .payment-amount {

   font-size: 30px;

   font-weight: 700;

   margin-bottom: 20px;

  }



  /* QR */



  .qr-container {

   display: flex;

   justify-content: center;

   margin-bottom: 20px;

  }



  #qrCode {

   width: 220px;

   height: 220px;

   padding: 10px;

   background: #ffffff;

   border-radius: 12px;

   object-fit: contain;

  }



  /* PAY BUTTON */



  .upi-btn {

   width: 100%;

   max-width: 400px;

   display: inline-flex;

   justify-content: center;

   align-items: center;

   padding: 14px 20px;

   border: none;

   border-radius: 9px;

   background: var(--accent);

   color: #ffffff;

   font-size: 16px;

   font-weight: 700;

   cursor: pointer;

   text-decoration: none;

   transition: 0.2s;

  }



  .upi-btn:hover {

   transform: translateY(-2px);

   opacity: 0.9;

  }



  .upi-info {

   margin-top: 15px;

   color: var(--text-secondary);

   font-size: 12px;

  }



  .error-message {

   display: none;

   margin-top: 8px;

   color: #ef4444;

   font-size: 13px;

  }



  /* FOOTER LINK */



  .back-home {

   display: block;

   text-align: center;

   margin-top: 25px;

   color: var(--text-secondary);

   text-decoration: none;

   font-size: 14px;

  }



  .back-home:hover {

   color: var(--text);

  }



  .name-section {

 margin-top: 25px;

}



.name-section label {

 display: block;

 font-size: 14px;

 margin-bottom: 8px;

 color: var(--text-secondary);

}



\#userName {

 width: 100%;

 height: 48px;

 padding: 0 15px;

 border-radius: 9px;

 border: 1px solid var(--border);

 background: var(--bg);

 color: var(--text);

 outline: none;

 font-size: 15px;

}



\#userName:focus {

 border-color: var(--accent);

}



\#userName:invalid {

 border-color: var(--border);

}



  /* MOBILE */



  @media (max-width: 600px) {

   .support-container {

    padding: 25px 15px 50px;

   }



   .support-card {

    padding: 25px 18px;

   }



   .support-header h1 {

    font-size: 27px;

   }



   .amount-buttons {

    grid-template-columns: 1fr;

   }



   #qrCode {

    width: 190px;

    height: 190px;

   }

  }

/* QR message hint */
.qr-message-hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}


/* Your Name input */
#userName {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-top: 8px;

  background: var(--surface);
  color: var(--text);

  border: 1px solid var(--border);
  border-radius: 10px;

  font-size: 15px;
  font-family: inherit;
  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Focus */
#userName:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

/* Placeholder */
#userName::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

/* =================================
   ALTERNATIVE SUPPORT
================================= */

.alternative-support {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 30px;
  padding: 22px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.alternative-support:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.alternative-support-icon {
  width: 50px;
  height: 50px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 12px;

  font-size: 23px;
}

.alternative-support-content {
  flex: 1;
}

.alternative-support-content h2 {
  margin: 0 0 5px;

  color: var(--text);

  font-size: 18px;
  font-weight: 700;
}

.alternative-support-content p {
  margin: 0 0 14px;

  color: var(--text-secondary);

  font-size: 13px;
  line-height: 1.6;
}

.bmc-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 15px;

  background: #ffdd00;
  color: #000000;

  border-radius: 8px;

  text-decoration: none;

  font-size: 13px;
  font-weight: 700;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.bmc-support-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}


/* =================================
   MOBILE
================================= */

@media (max-width: 600px) {

  .alternative-support {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .alternative-support-icon {
    width: 46px;
    height: 46px;
  }

  .alternative-support-content h2 {
    font-size: 17px;
  }

  .alternative-support-content p {
    font-size: 13px;
  }

  .bmc-support-btn {
    width: 100%;
    box-sizing: border-box;
  }

}