.codimiq-sale-calculator { width: 100%; }

.codimiq-sale-calculator__inner{
  background-color:#4f4f4f; /* fallback */
  background-image:url('https://www.codimiq.com/wp-content/uploads/2025/12/Background-Ext-2.jpg');
  background-repeat:repeat;
  border:1px solid #cccccc;
  padding:40px;
  border-radius:10px;
  box-sizing:border-box;
  width:100%;
}

@media (min-width: 1024px){
  .codimiq-sale-calculator__inner{
    width:800px;
    margin:0 auto;
  }
}

.codimiq-sale-calculator__label{
  display:block;
  font-size:18px;
  font-weight:700;
  color:#ffffff;
  margin:0 0 8px 0;
}

.codimiq-sale-calculator__input,
.codimiq-sale-calculator__select{
  width:100%;
  box-sizing:border-box;
  border-radius:10px;
  padding:10px 12px;
}

/* Layout: mobile first (order: normal, discount, sale) */
.codimiq-sale-calculator__inner{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "normal"
    "discount"
    "sale";
  gap:16px;
}

.codimiq-sale-calculator__field--normal{ grid-area:normal; }
.codimiq-sale-calculator__field--discount{ grid-area:discount; }
.codimiq-sale-calculator__field--sale{ grid-area:sale; }

/* Tablet: 2 columns */
@media (min-width: 600px) and (max-width: 1023px){
  .codimiq-sale-calculator__inner{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "normal sale"
      "discount discount";
    align-items:end;
  }
}

/* Desktop: 3 columns in one row */
@media (min-width: 1024px){
  .codimiq-sale-calculator__inner{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:"normal discount sale";
    align-items:end;
  }
}