.md-donate-box {
    max-width: 100%;
    background: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
    display: grid;
    gap: 12px;
}

.md-amount {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-content: space-between;
    justify-content: space-between;
}

.md-amount input {
    width: 160px;
    text-align: center;
    font-size: 18px;
}

.md-amount button {
    width: 40px;
    height: 40px;
}

.md-presets button {
    margin: 3px;
    padding: 8px 5px;
    border-radius: 8px;
    cursor: pointer;
    width: 18.5%;
    font-size: 12px;
}
.md-amount2{
    width: 65%;
    
}
.md-submit {
    background: #5bc0eb;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    background-color: #5ebfea;
    font-size: .875em;
    line-height: 2em;
    padding: .5714em 2.0714em;
    border-radius: .7142em;
    border: unset;
    color: #fff !important;
    transition: background-color .3s;
}




.md-amount input{

    line-height: 36px;
    color: #52575c;
    border: 1px solid #52575c;
    border-radius: 8px !important;
    padding: 0 15px;
    width: 100%;
    font-weight: 300;
    font-size: .875em;
    font-family: 'IRANSansWeb';
}


.box-change-gheymat{
    width: 99%;
    display: flex;
    flex-direction: row;
    background-color: #e5e5e5;
    border-radius: 8px;
    height: 69px;
    padding: 13px 17px 10px 17px;
    border-radius: 20px;
}

.md-minus,.md-plus{
    background-color: #fff;
    color: #52575c;
    width: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: 0px 30px 40px rgba(96, 97, 112, .04);
    transition: color .3s;
    border: none;
}



.botom-change{
    margin: 4px;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 25%;
    background-color: #eaf7fc;
    color: #1e1e1e;
    background-color: #ebebeb;
    border-radius: 8px;
    border: 2px solid #f2f2f5;
    line-height: 20px;
    font-size: .875em;
    transition: background-color .3s, border .3s, color .3s;
}












.md-submit.is-completed {
    background-color: #e5e7eb;   /* خاکستری روشن */
    color: #374151;
    border: 1px solid #d1d5db;
    cursor: not-allowed;
    opacity: 0.8;
    font-size: 14px;
}

/* اگر خواستی سبز باشه (اختیاری) */
/*
.md-submit.is-completed {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #34d399;
}
*/









/* پایه */
.md-donate-box * {
  box-sizing: border-box;
}

.md-donate-box .md-amount {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* دسکتاپ: کنار هم (اختیاری) */
@media (min-width: 769px) {
  .md-donate-box .md-amount2,
  .md-donate-box .md-amount3 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* موبایل: اول amount2 بعد amount3 */
@media (max-width: 768px) {
  .md-donate-box .md-amount {
    flex-direction: column; /* ترتیب: amount2 سپس amount3 */
    gap: 12px;
  }

  .md-donate-box .md-amount2,
  .md-donate-box .md-amount3 {
    width: 100%;
  }

  /* دکمه +/- و نمایش مبلغ */
  .md-donate-box .box-change-gheymat {
    width: 100% !important; /* چون inline داری */
    gap: 8px;
  }

  .md-donate-box .md-minus,
  .md-donate-box .md-plus {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .md-donate-box #md_amount_display {
    width: 100% !important; /* چون inline داری */
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* دکمه‌های preset در موبایل دو ستونه */
  .md-donate-box .md-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .md-donate-box .md-presets > button.botom-change {
   flex: 4 4 calc(26% - 8px);
  }

  /* مبلغ دلخواه و اینپوت‌ها */
  .md-donate-box #md_custom_amount_wrap {
    width: 100% !important;
  }

  .md-donate-box #md_custom_amount_toman,
  .md-donate-box #md_name,
  .md-donate-box #md_mobile,
  .md-donate-box #md_email {
    width: 100%;
  }

  .md-donate-box .md-submit {
    width: 100% !important; /* اگر می‌خوای تمام‌عرض بشه */
  }
}