/* Storage Pages CSS */
.size-card { 
  background: white; 
  border-radius: 1rem; 
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); 
  border: 1px solid rgb(243 244 246); 
  padding: 1.5rem; 
  text-align: center; 
}

.size-card.featured { 
  border: 2px solid rgb(37 99 235); 
  position: relative; 
}

.size-badge { 
  position: absolute; 
  top: -0.75rem; 
  left: 50%; 
  transform: translateX(-50%); 
  background: rgb(37 99 235); 
  color: white; 
  padding: 0.25rem 1rem; 
  border-radius: 9999px; 
  font-size: 0.875rem; 
  font-weight: 600; 
}

.size-icon { 
  width: 6rem; 
  height: 6rem; 
  margin: 0 auto 1rem; 
  border-radius: 1rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: bold; 
  font-size: 1.125rem; 
}

.size-icon.small { background: rgb(239 246 255); color: rgb(29 78 216); }
.size-icon.medium { background: rgb(37 99 235); color: white; }
.size-icon.large { background: rgb(75 85 99); color: white; }

.price-highlight { 
  color: rgb(37 99 235); 
  font-weight: 600; 
  font-size: 1.25rem; 
  margin-bottom: 1rem; 
}

.calculator-section { 
  background: rgb(239 246 255); 
  border-radius: 1rem; 
  padding: 2rem; 
  margin-bottom: 4rem; 
}

.calculator-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 0.75rem; 
}

.calculator-option { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding: 0.75rem; 
  background: white; 
  border-radius: 0.5rem; 
  cursor: pointer; 
  transition: background-color 0.2s; 
}

.calculator-option:hover { 
  background: rgb(239 246 255); 
}

.calculator-result { 
  text-align: center; 
}

.result-size { 
  font-size: 1.875rem; 
  font-weight: bold; 
  color: rgb(37 99 235); 
  margin-bottom: 0.5rem; 
}

.result-price { 
  font-size: 1.25rem; 
  font-weight: 600; 
  color: rgb(75 85 99); 
  margin-bottom: 0.5rem; 
}

.result-desc { 
  color: rgb(107 114 128); 
  margin-bottom: 1rem; 
}

.result-cta { 
  background: rgb(37 99 235); 
  color: white; 
  padding: 0.5rem 1.5rem; 
  border-radius: 0.5rem; 
  text-decoration: none; 
  display: inline-block; 
  transition: background-color 0.2s; 
}

.result-cta:hover { 
  background: rgb(29 78 216); 
}

.content-section { 
  padding: 4rem 0; 
}

.section-title { 
  font-size: 1.875rem; 
  font-weight: bold; 
  color: rgb(75 85 99); 
  margin-bottom: 1rem; 
}

.section-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 3rem; 
}

.text-content { 
  color: rgb(107 114 128); 
  margin-bottom: 1rem; 
  line-height: 1.6; 
}

.feature-list { 
  list-style: none; 
  padding: 0; 
}

.feature-list li { 
  color: rgb(107 114 128); 
  margin-bottom: 0.5rem; 
}

.tip-box { 
  background: rgb(239 246 255); 
  padding: 1.5rem; 
  border-radius: 1rem; 
  border: 1px solid rgb(219 234 254); 
  margin: 2rem 0; 
}

.tip-title { 
  font-size: 1.25rem; 
  font-weight: 600; 
  color: rgb(29 78 216); 
  margin-bottom: 0.75rem; 
}

.comparison-table { 
  width: 100%; 
  background: white; 
  border-radius: 1rem; 
  overflow: hidden; 
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); 
  border: 1px solid rgb(243 244 246); 
}

.table-header { 
  background: rgb(37 99 235); 
  color: white; 
}

.table-header th { 
  padding: 1rem 1.5rem; 
  text-align: left; 
  font-weight: 600; 
}

.table-body tr { 
  border-bottom: 1px solid rgb(243 244 246); 
}

.table-body td { 
  padding: 1rem 1.5rem; 
}

.price-cell { 
  color: rgb(37 99 235); 
  font-weight: bold; 
  text-align: center; 
}

.savings-cell { 
  color: rgb(34 197 94); 
  font-weight: 600; 
  text-align: center; 
}

.hidden { 
  display: none; 
}