/* =============================================
   LUKSCALC — BASE
   ============================================= */

.lukscalc {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  border: none !important;
  border-radius: 18px;
  padding: 24px;
  margin: 24px 0;
  box-sizing: border-box;
}

.lukscalc *,
.lukscalc *::before,
.lukscalc *::after {
  box-sizing: border-box;
}

/* =============================================
   HEADER
   ============================================= */

.lukscalc-header {
  margin-bottom: 20px;
}

.lukscalc-header h2 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.2;
}

.lukscalc-header p,
.lukscalc-muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

/* =============================================
   FORM & SECTIONS
   ============================================= */

.lukscalc-form {
  margin: 0;
}

.lukscalc-section {
  margin: 18px 0;
}

.lukscalc-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.lukscalc-input,
.lukscalc select,
.lukscalc input[type="text"],
.lukscalc input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #222;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
}

.lukscalc-input:focus,
.lukscalc select:focus,
.lukscalc input[type="text"]:focus,
.lukscalc input[type="number"]:focus {
  outline: none;
  border-color: #00524C;
  box-shadow: 0 0 0 3px rgba(0, 82, 76, 0.12);
}

.lukscalc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* =============================================
   RADIO / CHECKBOX
   ============================================= */

.lukscalc-radio-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.lukscalc-radio-group label,
.lukscalc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #222;
  cursor: pointer;
}

.lukscalc-radio-group input,
.lukscalc-checkbox input {
  margin: 0;
}

/* =============================================
   PRODUCT CARD
   ============================================= */

.lukscalc-product-card,
.lukscalc-current-product {
  background: #f7f7f7;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
}

.lukscalc-current-product-label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.lukscalc-current-product-name {
  color: #222;
}

.lukscalc-product-preview-compact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
}

.lukscalc-product-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lukscalc-product-preview-compact strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #222;
}

.lukscalc-product-image {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.lukscalc a.lukscalc-product-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #333 !important;
  text-decoration: none !important;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.lukscalc a.lukscalc-product-link::after {
  content: none !important;
  display: none !important;
}

.lukscalc a.lukscalc-product-link:hover {
  background: #eee;
  border-color: #d5d5d5;
  color: #222 !important;
  text-decoration: none !important;
}

.lukscalc a.lukscalc-product-link:visited {
  color: #333 !important;
}

.lukscalc a.lukscalc-product-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* =============================================
   WALLS
   ============================================= */

.lukscalc-ceiling-fields {
  margin-top: 14px;
}

.lukscalc-walls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lukscalc-wall-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px 120px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 14px;
}

.lukscalc-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}

.lukscalc-wall-action {
  display: flex;
  align-items: end;
}

/* =============================================
   BUTTONS
   ============================================= */

.lukscalc-submit,
.lukscalc-add-wall,
.lukscalc-remove-wall,
.lukscalc-reset-btn {
  appearance: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Calcular */
.lukscalc-submit {
  background: #00524C;
  color: #fff;
  border: 1px solid #00524C;
}

.lukscalc-submit:hover,
.lukscalc-submit:focus,
.lukscalc-submit:active {
  background: #fff;
  color: #00524C;
  border: 1px solid #00524C;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 82, 76, 0.12);
}

/* Reset */
.lukscalc-reset-btn {
  background: #fff;
  color: #00524C;
  border: 1px solid #00524C;
}

.lukscalc-reset-btn:hover {
  background: #00524C;
  color: #fff;
  border-color: #00524C;
}

.lukscalc-reset-btn:focus,
.lukscalc-reset-btn:active {
  background: #fff;
  color: #00524C;
  border-color: #00524C;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 82, 76, 0.12);
}

/* Adicionar / Remover parede */
.lukscalc button.lukscalc-add-wall,
.lukscalc button.lukscalc-remove-wall {
  background: #fff;
  color: #00524C !important;
  border: 1px solid #00524C;
}

.lukscalc button.lukscalc-add-wall:hover,
.lukscalc button.lukscalc-remove-wall:hover {
  background: #00524C !important;
  color: #fff !important;
  border-color: #00524C !important;
}

.lukscalc button.lukscalc-add-wall:focus,
.lukscalc button.lukscalc-add-wall:active,
.lukscalc button.lukscalc-remove-wall:focus,
.lukscalc button.lukscalc-remove-wall:active {
  background: #fff !important;
  color: #00524C !important;
  border-color: #00524C !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 82, 76, 0.12);
}

.lukscalc-actions {
  margin-top: 24px;
}

.lukscalc-actions-inline {
  margin-top: 12px;
}

/* =============================================
   ESTIMATE CARDS
   ============================================= */

.lukscalc-estimate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.lukscalc-estimate-card {
  padding: 14px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lukscalc-estimate-card:hover {
  background: #f9fdfc;
  border-color: #00524C;
}

.lukscalc-estimate-card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.lukscalc-estimate-card span {
  display: block;
  font-size: 13px;
  color: #666;
}

.lukscalc-estimate-card em {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  color: #00524C;
}

/* =============================================
   RESULT
   ============================================= */

.lukscalc-result {
  margin-top: 20px;
  width: 100%;
}

.lukscalc-result-card {
  width: 100%;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 16px;
}

.lukscalc-result-card h3 {
  margin: 0 0 14px;
  color: #00524C;
}

.lukscalc-result-card h4 {
  margin: 0 0 14px;
  color: #222;
}

.lukscalc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.lukscalc-result-item {
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
}

.lukscalc-result-label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.lukscalc-result-item strong {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  color: #222;
  word-break: break-word;
}

.lukscalc-result-type {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

.lukscalc-result-type strong {
  font-weight: 600;
  color: #444;
}

.lukscalc-result-surplus {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #2f3a36;
}

.lukscalc-result-note {
  margin: 16px 0 0;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
}

.lukscalc-result-empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

/* =============================================
   PACKAGING
   ============================================= */

.lukscalc-result-packaging-wrap {
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e3e6e8;
}

.lukscalc-result-packaging-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #00524C;
}

.lukscalc-result-packaging-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.lukscalc-result-packaging-groups--single {
  grid-template-columns: 1fr;
}

.lukscalc-result-packaging-group {
  min-width: 0;
  width: 100%;
  padding: 16px;
  background: #fff;
  border: 1px solid #e7ecea;
  border-radius: 14px;
}

.lukscalc-result-packaging-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lukscalc-result-packaging-group__header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #00524C;
}

.lukscalc-result-packaging-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: #00524C;
  background: #f7faf9;
  border: 1px solid #d9e2df;
  border-radius: 999px;
}

.lukscalc-result-packaging-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lukscalc-result-packaging-list li {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  background: #fafcfb;
  border: 1px solid #eef2f1;
  border-radius: 10px;
}

.lukscalc-result-packaging-list li:last-child {
  margin-bottom: 0;
}

.lukscalc-result-packaging-list strong {
  font-weight: 600;
  color: #00524C;
}

.lukscalc-result-packaging-list span {
  font-size: 13px;
  color: #5f6b66;
}

/* =============================================
   WARNINGS & ERRORS
   ============================================= */

.lukscalc-result-warnings {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8f8f8;
  border: 1px solid #ececec;
  border-radius: 10px;
}

.lukscalc-result-warnings h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #444;
}

.lukscalc-result-warnings ul {
  margin: 0;
  padding-left: 18px;
}

.lukscalc-result-warnings li {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.lukscalc-result-error {
  background: #fff4f4;
  border: 1px solid #efb7b7;
  color: #9f2323;
}

.lukscalc-result-error ul {
  margin: 10px 0 0 18px;
  padding: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 767px) {
  .lukscalc {
    padding: 18px;
  }

  .lukscalc-grid-2,
  .lukscalc-result-grid,
  .lukscalc-wall-row,
  .lukscalc-result-packaging-groups {
    grid-template-columns: 1fr;
  }

  .lukscalc-wall-action {
    align-items: stretch;
  }

  .lukscalc-submit,
  .lukscalc-add-wall,
  .lukscalc-remove-wall {
    width: 100%;
  }

  .lukscalc-result-packaging-group__header {
    align-items: flex-start;
    flex-direction: column;
  }
}