/* LESS Calculadora v1.8.8 – mobile Step 4 */
:root{--c-olive:#8a9a6a;--c-bg:#f2f5f3;--c-card:#ffffff;--c-text:#2f3b3a;--c-muted:#6b7a78;--c-border:#e6ecea;--c-gold:#be8c26;--c-green:#64a163;--c-dark:#334343}
#less-calculadora{background:var(--c-bg); padding:18px; border-radius:14px;}
.less-calc-shell{max-width:900px; margin:0 auto;}
.less-calc-card{background:var(--c-card); border:1px solid var(--c-border); border-radius:14px; box-shadow:0 6px 22px rgba(33,43,54,.06); overflow:hidden;}
.less-calc-header{height:220px; background:#ddd center/cover no-repeat; border-radius:14px 14px 0 0;}
.less-calc-body{padding:24px 28px;}
.less-calc-title{font-size:28px; text-align:center; color:var(--c-text); margin:6px 0 0;}
.less-calc-sub{font-size:16px; text-align:center; color:var(--c-muted); margin:10px 0 24px;}
/* Steps 1-3 */
.less-calc-list{max-width:460px; margin:0 auto; padding:0; list-style:none;}
.less-calc-item{display:flex; align-items:center; gap:10px; padding:10px 6px;}
.less-calc-radio{appearance:none; width:18px; height:18px; border:2px solid #c8d2cf; border-radius:50%; position:relative; outline:none; cursor:pointer; background:#fff;}
.less-calc-radio:checked{border-color:var(--c-olive);}
.less-calc-radio:checked::after{content:''; position:absolute; inset:3px; background:var(--c-olive); border-radius:50%;}
.less-calc-input, .less-calc-select{padding:12px 14px; border:1px solid var(--c-border); border-radius:12px; width:280px;}
.less-calc-actions{display:flex; justify-content:space-between; gap:10px; padding:12px 0 0;}
.less-calc-btn{display:inline-block; padding:10px 16px; background:var(--c-olive); color:#fff; border:0; border-radius:10px; text-decoration:none; cursor:pointer;}
.less-calc-btn[disabled]{opacity:.6; cursor:not-allowed;}
/* Step 4 table-like */
.step4-head{display:grid; grid-template-columns: 1fr 110px 80px 130px 140px; gap:16px; font-weight:600; color:#2f3b3a; padding:10px 0; border-bottom:1px solid var(--c-border);}
.step4-section{padding:16px 0; border-bottom:1px solid var(--c-border);}
.step4-sec-title{font-weight:600; color:#2f3b3a; margin:8px 0 12px;}
.step4-row{display:grid; grid-template-columns: 1fr 110px 80px 130px 140px; gap:16px; align-items:center; padding:12px 0;}
.step4-prod{display:flex; gap:14px; align-items:center;}
.step4-thumb{width:84px; height:84px; border:1px solid #e0e6e3; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff;}
.step4-thumb img{max-width:100%; max-height:100%;}
.step4-name{color:#2f3b3a; font-size:15px;}
.step4-price, .step4-subtotal{font-weight:600; color:var(--c-green);}
.step4-qty input{width:64px; text-align:center; border:1px solid var(--c-border); border-radius:10px; padding:8px 6px; background:#f6f7f6;}
.btn-add{justify-self:end; min-width:120px; text-align:center; border:2px solid var(--c-gold); color:var(--c-gold); background:#fff; border-radius:24px; padding:8px 14px; cursor:pointer;}
.btn-add:hover{filter:brightness(0.98)}
/* Footer buttons */
.step4-footer{display:flex; gap:16px; justify-content:space-between; padding-top:12px;}
.btn-dark{flex:1; background:var(--c-dark); color:#fff; border:0; border-radius:28px; padding:12px 18px; text-align:center; cursor:pointer;}
.btn-gold{flex:1; background:var(--c-gold); color:#fff; border:0; border-radius:28px; padding:12px 18px; text-align:center; cursor:pointer;}
/* Progress + Refazer */
.less-calc-progress-wrap{text-align:center; margin:14px auto 0;}
.less-calc-progress-text{font-size:14px; color:#5f6c6a; margin-bottom:8px;}
.less-calc-progress{height:10px; background:#e6ecea; border-radius:999px; overflow:hidden;}
.less-calc-progress-bar{height:10px; width:0; background:var(--c-olive);}
.btn-refazer{display:inline-block; margin:18px auto 0; background:#fff; color:#8a4f4f; border:2px solid #c9a2a2; border-radius:24px; padding:10px 18px; cursor:pointer;}
/* Steps visibility */
[data-step]{display:none;}
[data-step].is-active{display:block;}
@media (max-width: 720px){
  .step4-head, .step4-row{ grid-template-columns: 1fr 90px 70px 110px 120px; gap:12px; }
  .step4-thumb{width:72px; height:72px;}
}


/* ---------- Mobile layout for Step 4 ---------- */
@media (max-width: 720px){
  /* hide desktop header row */
  .step4-head{ display:none; }

  /* turn each row into a card-like stack with labeled fields */
  .step4-row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prod prod"
      "price qty"
      "subtotal button";
    gap: 10px;
    padding: 14px 12px;
    border:1px solid var(--c-border);
    border-radius:12px;
    background:#fff;
    margin-bottom:12px;
  }
  .step4-prod{ grid-area: prod; }
  .step4-price{ grid-area: price; }
  .step4-qty{ grid-area: qty; }
  .step4-subtotal{ grid-area: subtotal; }
  .step4-row > div:last-child{ grid-area: button; justify-self: stretch; }

  /* labels above fields */
  .step4-price::before,
  .step4-qty::before,
  .step4-subtotal::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    line-height:1.1;
    color: var(--c-muted);
    margin-bottom:4px;
  }
  /* add labels via CSS attribute fallback */
  .step4-price{ position:relative; }
  .step4-qty{ position:relative; }
  .step4-subtotal{ position:relative; }

  /* visuals */
  .step4-thumb{ width:64px; height:64px; }
  .step4-name{ font-size:14px; }

  .step4-qty input{
    width:100%;
    max-width:none;
    padding:10px 10px;
    border-radius:12px;
  }

  .btn-add{
    width:100%;
    min-width:0;
    border-radius:14px;
    padding:12px 14px;
    font-weight:600;
  }

  /* footer buttons stacked */
  .step4-footer{
    flex-direction: column;
  }
  .btn-dark, .btn-gold{
    width:100%;
  }
}
/* Provide default labels for mobile using attribute selectors */
@media (max-width: 720px){
  .step4-price:not([data-label]){ position:relative; }
  .step4-price:not([data-label])::before{ content:"Preço"; }
  .step4-qty:not([data-label]){ position:relative; }
  .step4-qty:not([data-label])::before{ content:"Qtd"; }
  .step4-subtotal:not([data-label]){ position:relative; }
  .step4-subtotal:not([data-label])::before{ content:"Subtotal"; }
}