/* =====================================================
   BikeID
   File: mint.css
   Stili specifici della sezione Mint
   ===================================================== */


/* =====================================================
   TOKEN URI E MESSAGGI DI STATO
   ===================================================== */

#mint-tokenuri{
  color:#2ee58f;
  font-weight:800;
}

#mint-tokenuri::placeholder{
  color:rgba(255,255,255,.55);
  font-weight:600;
}

.tri-actions-status{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
}

.btn-ok{
  min-height:16px;
  color:#2ee58f;
  font-size:12px;
  font-weight:800;
}

.btn-ok.error{
  color:#ff4d4d;
}

.tri-badge{
  min-height:16px;
  font-size:12px;
  opacity:.95;
}

.tri-badge.ok{
  color:#2ee58f;
}

.tri-badge.error{
  color:#ff6b6b;
}

.tri-badge.info{
  color:#fbbf24;
}


/* =====================================================
   WORKFLOW MINT — DESKTOP
   ===================================================== */

.button-row.tri-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px;
}

.tri-action{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* =====================================================
   WORKFLOW MINT — MOBILE
   ===================================================== */

@media (max-width:900px){

  /* Contenitore generale */

  .button-row.tri-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:22px;
  }


  /* Gruppi del workflow */

  .button-row.tri-actions > .tri-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }


  /* Pulsanti con larghezza uniforme */

  .button-row.tri-actions .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(100%,320px);
    min-height:42px;
    margin:0 auto;
    padding:9px 16px;
    font-size:12px;
    text-align:center;
    white-space:normal;
  }


  /* Separatore tra Reset e Genera JSON */

  .button-row.tri-actions > .tri-action:nth-child(2){
    position:relative;
    padding-top:22px;
  }

  .button-row.tri-actions > .tri-action:nth-child(2)::before{
    content:"";
    position:absolute;
    top:0;
    left:10%;
    right:10%;
    height:1px;
    background:rgba(148,163,184,.28);
  }


  /* Gruppo Mint, Invia e PDF */

  .button-row.tri-actions > .tri-action:last-child{
    width:100%;
  }

  .button-row.tri-actions > .tri-action:last-child > .btn-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:22px;
  }


  /* Mint TOKEN */

  #mint-nft-btn{
    order:1;
    width:min(100%,320px);
    margin:0 auto;
    background:linear-gradient(to right,var(--accent),#fb923c);
    color:#0f172a;
    border-color:transparent;
  }


  /* Stato Mint */

  #ok-mint{
    order:2;
    width:100%;
    margin:0;
    font-size:13px;
    text-align:center;
  }


  /* Invia TOKEN */

  #btn-mint-invia{
    order:3;
    position:relative;
    width:min(100%,320px);
    margin:0 auto;
    background:rgba(9,9,11,.96);
    border-color:rgba(148,163,253,.22);
  }


  /* Genera PDF */

  #btn-generate-pdf{
    order:4;
    position:relative;
    width:min(100%,320px);
    margin:0 auto;
    background:rgba(9,9,11,.96);
    color:var(--accent);
    border-color:var(--accent);
  }


  /* Separatori sopra Invia TOKEN e Genera PDF */

  #btn-mint-invia::before,
  #btn-generate-pdf::before{
    content:"";
    position:absolute;
    top:-12px;
    left:8%;
    right:8%;
    height:1px;
    background:rgba(148,163,184,.28);
  }


  /* Messaggio generazione PDF */

  #mint-button-status{
    order:5;
    width:100%;
    margin:0;
    padding:0 8px;
    font-size:13px;
    line-height:1.4;
    text-align:center;
    overflow-wrap:anywhere;
  }


  /* Report Genera JSON e Upload */

  #ok-json,
  #ok-upload{
    width:100%;
    margin-top:8px;
    font-size:13px;
    text-align:center;
  }


  /* Badge numerati */

  .button-row.tri-actions .btn-step-badge{
    width:17px;
    height:17px;
    flex:0 0 17px;
    margin-right:3px;
    font-size:10px;
  }
}