.codimiq-tva-converter { width: 100%; }

.codimiq-tva-converter__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-tva-converter__inner{
    width:800px;
  }
}

.codimiq-tva-converter__field{ min-width:0; }
.codimiq-tva-converter__label{
  display:block;
  font-weight:700;
  color:#ffffff;
  margin:0 0 8px 0;
}

.codimiq-tva-converter__input,
.codimiq-tva-converter__select{
  width:100%;
  box-sizing:border-box;
  border-radius:10px;
  padding:10px 12px;
}

.codimiq-tva-converter__input--readonly{
  background:#eeeeee;
}

/* Layout: mobile first (order: rate, ht, ttc, vat) */
.codimiq-tva-converter__inner{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "rate"
    "ht"
    "ttc"
    "vat";
  gap:16px;
}

.codimiq-tva-converter__field--ht{ grid-area:ht; }
.codimiq-tva-converter__field--rate{ grid-area:rate; }
.codimiq-tva-converter__field--vat{ grid-area:vat; }
.codimiq-tva-converter__field--ttc{ grid-area:ttc; }

/* Tablet: 2 columns with required order:
   Row 1: HT, TTC
   Row 2: Rate, VAT
*/
@media (min-width: 600px) and (max-width: 1023px){
  .codimiq-tva-converter__inner{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "ht ttc"
      "rate vat";
  }
}

/* Desktop: 4 columns in one row: HT, Rate, VAT, TTC */
@media (min-width: 1024px){
  .codimiq-tva-converter__inner{
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-areas:"ht rate vat ttc";
    align-items:end;
  }
}