/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.form_tpv {  }
table.table-form-tpv { width:48%; display:inline-block; margin-left:1%; transition:all ease 0.5; }
table.table-form-tpv.loading { opacity: 0.5;}
table.table-form-tpv td { position:relative; overflow: visible;}
table.table-form-tpv td + td { padding-left: 10px; }
table.table-form-tpv input#amountTPV.warning, table.table-form-tpv input#orderNumber.warning { border-color: red }

input#amountTPV { width:90%; font-size: 2em; border:0; text-align: right; border-bottom: 1px solid #666; margin: 5px 0;  padding: 0 4px; }
input#orderNumber,input#orderDesc { width:90%; font-size: 2em; border:0; text-align: right; color:#666; border-bottom: 1px solid #666;margin: 5px 0; padding: 0 4px;  }

input#amountTPV + span { font-size: 2em; }

table.table-form-tpv span.error { position: absolute;z-index:-99; top:50%; background-color: red; color: white; width:auto; white-space: nowrap; left: 50%; font-size: 0.8em; transform: translate(-50%,-50%); padding: 4px; translate: opacity ease 0.5s; opacity:0; }
table.table-form-tpv span.error.show { display:block; top:50%; z-index:20; opacity:1; }

.section-right-form-tpv { display:inline-block; vertical-align: top; width:48%; margin-left: 2%; }
.img-formaspago { text-align: center; margin: 10px; }
.img-formaspago img { width:40%; }




table.table-result-tpv { margin: auto; min-width:50%;}
table.table-result-tpv tr td { padding: 5px; }
table.table-result-tpv tr td:first-of-type { text-align: right; }
table.table-result-tpv tr td:last-of-type { text-align: left; font-weight: bold;}

@media all and (max-width: 760px){
  table.table-form-tpv{ width:100%; display:inline-block; margin-left:0%; }
  .section-right-form-tpv{ width:100%; margin-left:0%; }
  .img-formaspago img{ width:80%; margin:1em; }
  table.table-form-tpv td + td{ width:50%; }
  input#amountTPV{ width:80%; }
}






.btn-tpv-normal, .btn-tpv-bizum {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
.btn-tpv-bizum {
    background: #00a884; /* Color tipo Bizum */
}
.btn-tpv-normal:hover, .btn-tpv-bizum:hover {
    opacity: 0.9;
}


/* Contenedor de botones */
.tpv-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Estilo base */
.btn-tpv-normal,
.btn-tpv-bizum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-tpv-normal span,
.btn-tpv-bizum span {
  display: inline-block;
}

/* Logos dentro de los botones */
.btn-tpv-normal img,
.btn-tpv-bizum img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* Botón Tarjeta */
.btn-tpv-normal {
  background: #0073aa;
  color: #fff;
}
.btn-tpv-normal:hover {
  background: #005f8c;
  transform: translateY(-1px);
}

/* Botón Bizum */
.btn-tpv-bizum {
  background: #00a884;
  color: #fff;
}
.btn-tpv-bizum:hover {
  background: #00906f;
  transform: translateY(-1px);
}

/* Adaptación móvil */
@media (max-width: 600px) {
  .btn-tpv-normal, .btn-tpv-bizum {
    width: 100%;
    justify-content: center;
  }
  .btn-tpv-normal img, .btn-tpv-bizum img {
    height: 20px;
  }
}