/* Estilos generales */
.arq-center{
  text-align: center;
}

.arq-basket table.shop_table { 
  width:100%; 
  font-size: 1em;
}

.arq-basket .arq-remove { 
  color:#a00; 
  text-decoration:none; 
  font-weight:bold; 
  font-size: 18px;
  transition: color 0.2s ease;
  border: none;
  padding: 0;
  background-color: transparent;
  text-shadow: none;
}
.arq-basket .arq-remove:hover {
  color:#900;
}

.arq-form input, .arq-form textarea { 
  width:100%; 
}

.e-toggle-cart-custom-icon {
    font-size: 32px;
    color:#000;
}

.arq-cart-link{
  position:relative; 
  display:inline-block;
}

.arq-cart-link:hover .e-toggle-cart-custom-icon{
    font-size: 32px;
    color:#8BC53F;
}

/* Contador */
.arq-counter {
  background:#8BC53F; 
  color:#fff;
  font-size: 15px;
  height: 25px;
  width: 25px;
  display: block;
  border-radius:50%; 
  text-align: center;
  line-height: 25px;
  position:absolute; 
  top: -20px; 
  right:-20px;
}

/* Contenedor del botón + cantidad */
.arq-add-to-quote {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Input de cantidad en productos (shop) */
.arq-qty {
  flex: 0 0 auto;
  width: 3.631em !important;
  padding: .5rem !important; 
  border: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
}

/* Input de cantidad en el basket */
.arq-update-qty {
  flex: 0 0 auto;
  width: 4em !important;
  padding: .5rem !important; 
  border: 1px solid #ccc;
  text-align: center;
}

/* Feedback visual cuando se actualiza cantidad */
.arq-update-qty.arq-updated {
  border: 2px solid #26b553;   /* verde */
  box-shadow: 0 0 5px rgba(38,181,83,0.5);
}

/* Botón */
.button.arq-open {
  background:#21325D;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background 0.3s ease;
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

/* Hover del botón */
.button.arq-open:hover {
  background:#1a2547;
}

@media (max-width: 600px) {
  .arq-add-to-quote {
    flex-direction: column;
    align-items: stretch;
  }

  .arq-qty {
    width: 100% !important;
  }

  .button.arq-open {
    width: 100%;
  }
}

/* Stretch: cuando Elementor aplica justify-content: stretch */
.arq-add-to-quote[style*="justify-content: stretch"] .arq-button {
    flex: 1; /* ocupa todo el ancho disponible */
}

/* Spinner estilo simple */
.arq-spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #21325D;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 8px;
  animation: arq-spin 0.8s linear infinite;
}

@keyframes arq-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mensaje debajo del botón */
.arq-feedback {
  margin-top: 5px;
  font-size: 0.9em;
  color: #8BC53F;
}

/* Celda con imagen + nombre */
.arq-product-cell {
  vertical-align: middle;
}

/* Imagen del producto */
.arq-product-cell img {
  width: 50px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
}

/* Nombre del producto */
.arq-product-name {
  font-weight: 500;
}

.arq-summary .shop_table {
  width: 100%;
  font-size: 1em;
  border-collapse: collapse;
}

.arq-summary .shop_table th,
.arq-summary .shop_table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.arq-summary .arq-product-cell {
  vertical-align: middle;
}

.arq-summary .arq-product-cell img {
  width: 50px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-right: 8px;
  vertical-align: middle;
}

.arq-summary-edit {
  margin-top: 15px;
  text-align: right;
}


.ark-submit-btn{
  background-color: #223A6B;
  color: #ffffff !important;
  border: none;
  border-radius: 0;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.3s ease;
  float: right;
  text-transform: uppercase;
}

/* Inputs y selects con fondo gris sutil, sin bordes, borde inferior azul */
.arq-form input[type="text"],
.arq-form input[type="email"],
.arq-form input[type="tel"],
.arq-form input[type="number"],
.arq-form select,
.arq-form textarea {
  width: 100%;
  background-color: #f7f7f7;
  border: none;
  border-bottom: 2px solid #223A6B;
  border-radius: 0;
  padding: 10px;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.arq-form input:focus,
.arq-form select:focus,
.arq-form textarea:focus {
  outline: none;
  background-color: #fff;
  border-bottom: 2px solid #1a2d55;
}

/* Etiquetas */
.arq-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #223A6B;
}

/* Botón */
.arq-form .ark-sumbit-btn {
  background-color: #223A6B;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.arq-form .ark-sumbit-btn:hover {
  background-color: #1a2d55;
}

/* Fila para nombre y apellido */
.arq-row {
  display: flex;
  gap: 20px;
}

.arq-row .arq-half {
  flex: 1;
  margin: 0;
}

.arq-row input {
  width: 100%;
}

/* Overlay de carga centrado */
.arq-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); /* fondo translúcido */
  display: none; /* oculto por defecto */
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  flex-direction: column;  /* spinner arriba, texto debajo */
  z-index: 9999; /* encima de todo */
}

/* Spinner grande */
.arq-overlay .arq-spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #223A6B; /* azul corporativo */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: arq-spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes arq-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Texto debajo del spinner */
.arq-overlay .arq-loading-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}


/* ===============================
   Mensaje de confirmación
================================= */
.arq-confirm {
  max-width: 600px;
  margin: 60px auto;
  text-align: center;
  padding: 30px;
  border: 2px solid #8BC53F;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.arq-confirm h2 {
  color: #223A6B;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.arq-confirm p {
  font-size: 16px;
  color: #333;
  margin: 10px 0;
}

.arq-confirm p strong,
.arq-confirm p span {
  color: #8BC53F;
  font-weight: 600;
}

/* Botón regresar al inicio */
.arq-home-btn {
  display: inline-block;
  background-color: #8BC53F;
  color: #fff !important;
  padding: 12px 24px;
  font-family: "Rajdhani", Sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.arq-home-btn:hover {
  background-color: #242322;
}

/* Mensajes de error en confirmación */
.arq-error-title {
  color: #a00;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.arq-error-msg {
  color: #a00;
  font-size: 16px;
  margin-bottom: 20px;
}