/* ======= COMPONENT STYLES ======= */
.btn{
  border:none;
  border-radius:16px;
  padding:14px 14px;
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  color:#fff;
  box-shadow: 0 14px 24px rgba(11,77,42,.22);
  transition: transform .08s ease, filter .2s ease;
}

.btn:active{ transform: translateY(1px) scale(.99); }
.btn:disabled{ opacity:.7; cursor:not-allowed; filter:saturate(.8); }

.btn.secondary{
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(15,26,20,.18);
  box-shadow: none;
  font-weight: 800;
  font-size: 14px;
}

.btn.secondary:hover{
  background: rgba(15,26,20,.04);
  color: var(--text);
}

.btn.secondary:active{
  transform: translateY(1px) scale(.99);
  background: rgba(15,26,20,.08);
}

.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(11,77,42,.08);
  color: var(--green);
  font-weight:950;
  font-size:12px;
}

.spinner{
  width:52px;height:52px;border-radius:50%;
  border:5px solid rgba(11,77,42,.14);
  border-top-color: rgba(11,77,42,.95);
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg);} }

.processing{
  font-size:18px;
  font-weight:1000;
  color:var(--green);
  letter-spacing:.2px;
}

.dots::after{
  content:"";
  display:inline-block;
  width:1.2em;
  text-align:left;
  animation: dots 1.1s steps(4, end) infinite;
}

@keyframes dots{
  0%{content:"";}
  25%{content:".";}
  50%{content:"..";}
  75%{content:"...";}
  100%{content:"";}
}

.resultBig{
  font-size:22px;
  line-height:1.2;
  font-weight:1100;
  color:var(--green);
  margin:0;
  padding: 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(15,106,56,.06), rgba(11,77,42,.03));
  border-radius: 14px;
  border: 1px solid rgba(15,106,56,.12);
}

.resultBig-content{
  position: relative;
  z-index: 1;
}

.price-header{
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-amounts{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.price-amount{
  font-size: 28px;
  font-weight: 1100;
  color: #0f6a38;
  text-shadow: 0 1px 2px rgba(15,106,56,.15);
}

.price-separator{
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  opacity: 0.6;
}

.price-disclaimer{
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  opacity: 0.8;
}

.details-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(11,77,42,.08);
  border: 1px solid rgba(11,77,42,.2);
  border-radius: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.details-toggle:hover{
  background: rgba(11,77,42,.12);
  transform: translateY(-1px);
}

.details-toggle-icon{
  font-size: 11px;
  transition: transform 0.2s ease;
}

.details-toggle.expanded .details-toggle-icon{
  transform: rotate(180deg);
}

.details-toggle.expanded .details-toggle-text::after{
  content: '';
}

.details-toggle:not(.expanded) .details-toggle-text::after{
  content: '';
}

.result-container{
  width: 100%;
  margin-bottom: 6px;
}

.result-label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: var(--green);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-label i{
  font-size: 16px;
  color: #4CAF50;
}

.resultMeta{
  font-size:13px;
  color:var(--muted);
  font-weight:750;
  margin-top:4px;
}

.fine{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:4px 0 0;
  font-weight:650;
}

form{
  padding:16px 18px 18px 18px;
  display:grid;
  gap:12px;
}

label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  display:block;
  margin:0 0 6px 2px;
}

input, select{
  width:100%;
  padding:13px 12px;
  border-radius:14px;
  border:1px solid rgba(15,26,20,.14);
  outline:none;
  font-size:15px;
  background:#fff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus, select:focus{
  border-color: rgba(15,106,56,.55);
  box-shadow: 0 0 0 4px rgba(15,106,56,.12);
  transform: translateY(-1px);
}

input:not(:placeholder-shown){
  background: linear-gradient(135deg, rgba(15,106,56,.02), rgba(76,175,80,.01));
}

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.grid2b{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }